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;

}