14. react 基础 redux 的编写 TodoList 功能
1. 安装 redux 监听工具 ( 需要翻墙 )
打开 谷歌商店
搜索 redux devtool
安装第一个即可
2. 安装 redux
yarn add redux
3. 创建 一个 store 文件夹( 与 项目 index.js 文件 同级 ) 并在 store 内 创建一个 reducer.js 文件 用于 区分各组件状态
# store/reducer.js
// 初始化 各组件的状态
const defaultState = {
inputValue : '', // 初始化 TodoList 的输入框的值
list : [] // 初始化 TodoList 列表的值
};
export default (state = defaultState, action)=>{
return state;
}
4. 在 store 文件夹内 创建 index.js 创建一个公共存储仓库, 将组件的各个状态作为参数传入
#store/index.js
import {createStore} from 'redux';
import reducer from './reducer'
const store = createStore(reducer);
export default store;
5. TodoList 内使用 store 进行数据存储
引入 store.js ( index.js 和 store 文件夹 是在同一级 )
import store from './store';
在 constructor 方法内 引入 store 的 state
constructor(props){
super(props);
this.state = store.getState(); // 当前 this.state 即可获得 store的 state 的内容
}
6. 当输入框改变时 改变 store 内的 inputValue 的数据
Input 添加 onChange 事件
# TodoList.js
<Input onChange={this.inputChange.bind(this)} />
inputChange(e){
// 调用 store.dispatch( action ) 方法 通知 store 变更 inputValue
const action = {
type : 'change_input_value',
value : e.target.value
};
store.dispatch( action );
}
# store 将 接收到的 state 和 action 转发给 reducer
# store/reducer.js
// reducer 可以接收 state 但是绝不可以修改 state
export default (state, action)=>{
// 打印 reducer 接收到的 state 和 action
console.log( state, action );
// 对 state 进行深复制 为 newState , 修改 newState 的值 并返回 newState
if( action.type === 'change_input_value' ){
const newState = JSON.parse( JSON.stringify( state ) );
newState.inputValue = action.value;
return newState;
}
return state;
}
# 当 store 返回数据发生了变化 需要 TodoList 订阅 store 数据变化 并进行 state 的 赋值
# TodoList.js
import store from './store'
constructor(){
// 订阅 store 的变化 并 编写 监听变化的 函数
store.subscribe(this.handStoreChange);
this.handStoreChange = this.handStoreChange.bind(this);
}
// 将 store 的值 重新 赋值给组件
handStoreChange(){
this.setState( store.getState() );
}
7. 同理 编写 列表 和 删除功能
#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';
ReactDOM.render(<TodoList />, document.getElementById('root'));
#TodoList.js
import React, { Component } from 'react';
import 'antd/dist/antd.css';
import { Input, Button, List } from 'antd';
import store from './store';
class TodoList extends Component{
constructor(props){
super(props);
this.state = store.getState();
this.inputValueChange = this.inputValueChange.bind(this);
this.addItem = this.addItem.bind(this);
this.delItem = this.delItem.bind(this);
this.handleStoreChange = this.handleStoreChange.bind(this);
store.subscribe(this.handleStoreChange);
}
render(){
return (
<div style={{ marginTop: '10px', marginLeft: '10px' }}>
<div>
<Input placeholder="请输入" value={this.state.inputValue} onChange={this.inputValueChange} style={{marginRight: '10px' , width: '300px'}} />
<Button type="primary" onClick={this.addItem}>提交</Button>
</div>
<div>
<List
style={{width: '300px', marginTop: '10px'}}
bordered
dataSource={this.state.list}
renderItem={(item, val)=> <List.Item index={val} onClick={this.delItem}>{item}</List.Item>}
/>
</div>
</div>
);
}
handleStoreChange(){
this.setState(store.getState());
}
addItem(){
const action = {
type: 'add_item',
value: this.state.inputValue
}
store.dispatch(action);
}
delItem(e){
const action = {
type : 'del_item',
value : e.target.getAttribute('index')
}
store.dispatch(action);
}
inputValueChange(e){
const action = {
type : 'input_value_change',
value : e.target.value
}
store.dispatch(action);
}
}
export default TodoList;
#store/index.js
import {createStore} from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
export default store;
#store/reducer.js
const defaultState = {
inputValue : '',
list : []
}
export default (status = defaultState, action)=>{
console.log(status, action)
if(action.type === 'input_value_change'){
const newState = JSON.parse(JSON.stringify(status));
newState.inputValue = action.value;
return newState;
}
if(action.type === 'add_item'){
const newState = JSON.parse(JSON.stringify(status));
newState.list = [...newState.list, action.value];
newState.inputValue = '';
return newState;
}
if(action.type === 'del_item'){
const newState = JSON.parse(JSON.stringify(status));
newState.list.splice(action.value, 1);
return newState;
}
return status;
}
最新文章
- WCF入门简单教程(图文) VS2010版
- Windows批处理:自动检查服务器连通性
- 【JAVA中String、StringBuffer、StringBuilder类的使用】
- Silverlight项目笔记2:.svc处理程序映射缺失导致的WCF RIA Services异常
- 转:Web.config配置文件详解(新手必看)
- Form_Form Builder国际化多语言开发(案例)
- Fixflow引擎解析(五)(内核) - 基于Token驱动的引擎内核运转原理
- http://www.tuicool.com/articles/RzUzqei
- C# Windows服务安装出现System.Security.SecurityException异常解决办法
- 【jquery学习笔记】关于$(window),$(";html,body";).scroll()的在不同浏览器的不同反应
- [CSAPP笔记][第六章存储器层次结构]
- [bash] 查找替换文件
- linux 非root用户 ssh 免密码登录
- pyCharm安装破解
- 使用 Angular Console 提升开发体验
- 【原创】hdu1698 Just a Hook(线段树→区间更新,区间查询)
- typescript handbook 学习笔记1
- 在H5页面内通过地址调起高德地图实现导航
- MySql Workbench导出ER图并存为PDF文件
- 代码审查Code Review
热门文章
- SpringBoot#应用启动后执行某些逻辑
- Linux动静态库
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 字体图标(Glyphicons):glyphicon glyphicon-pause
- Problem J. Joseph’s Problem 约瑟夫问题--余数之和
- 软件包管理:RPM包管理-yum在线管理
- tab选项卡,不带自动切换定时器
- springcloud--ruul(路由网关)
- DRF项目之实现用户密码加密保存
- kNN.py源码及注释(python3.x)
- 九、JavaScript之分号使用,支持一行多语句