初学 redux 实现todolist

一. 为什么使用redux

1. React 只是一个用于构建用户界面的js库
2. 对于父子组件的调用， 只能通过图一左的那种方式一级一级的进行传值
3. 使用redux, 就可以构建一个store, 把需要进行转发的数值存储到仓库里，各个组件就可以很方便的存取。如图一右

                          

　　　　　　图一　　　　　　　　　　　　　　　　　　　　　　　　　　　　　图二                                                   图三

二. redux的传值方式理解。

react Components 可以理解为： 一个要在图书馆借书的学生
Action Creators  可以理解为一句话：我要借一本《水浒传》
Store            可以理解为： 图书管理员， 当他听到你要借《水浒传》，首先就是查看图书馆的书本的信息
Reducers         可以理解为： 图书馆的书本的信息， 在这个信息里面进行检索关于《水浒传》的信息， 然后反馈给管理员， 借书的学生就可以从管理员那里得到这个信息。

三. todolist 具体实现方式的讲解（图三）

一共三个dom元素， Input Button List 
1. TodoList 组件从store得到数据。 this.state = store.getState()
2. store.subscribe(this.funcName), 当store里的内容发生改变时，执行函数
3. Input 绑定onChange事件，当输入内容的时候，传值给store 里面的inputValue, 让inputValue 显示在Input上
4. Button绑定onClick事件，事件发生的时候，把该事件发生的消息传给store, List新增元素inputValue.
5. 每一个List元素， 绑定onClick 事件， 当点击发生时，把该事件发生的消息传给store， list 删除该元素。

四：代码
todolist.js
注意：发送给store的是一个action = {type:, ...}， 然后使用函数store.dispatch(action)把值传递给了reducer
reducer 根据得到的不同的action.type, 作出不同的动作。

import React, { Component } from ‘react‘;
import { Button, Input, List } from ‘antd‘;
import store from ‘./store/index‘;

export default class TodoList extends Component{
    constructor(props){
        super(props);
        this.handleInputChange = this.handleInputChange.bind(this);
        this.handleBtnCLick = this.handleBtnCLick.bind(this);
        this.state = store.getState();
        this.handleStoreChange = this.handleStoreChange.bind(this);
        store.subscribe(this.handleStoreChange);
    }
    render(){
        return(
            <div style={{marginLeft:‘10px‘}}>
                <Input 
                    value={this.state.inputValue}
                    style={{width:‘300px‘, marginTop:‘10px‘}}
                    placeholder="Enter items" 
                    onChange={this.handleInputChange}
                />
                 <Button 
                     type="primary"
                     onClick={this.handleBtnCLick}
                 >提交</Button>
                 <List
                     style={{width:‘300px‘,  marginTop:‘10px‘}}
                    bordered
                    dataSource={this.state.list}
                    renderItem={(item, index) => <List.Item onClick={this.handleDeleteItem.bind(this, index)}>{item}</List.Item>}
                />
            </div>
        )
    }
    handleInputChange(e){
        const action = {
            type: ‘input_change‘,
            value: e.target.value
        }
        store.dispatch(action);
    }
    handleBtnCLick(){
        const action = {
            type: ‘add_item‘,
        }
        store.dispatch(action)
    }
    handleStoreChange(){
        this.setState(store.getState())
    }
    handleDeleteItem(index){
        const action = {
            type: ‘delete_item‘,
            index: index
        }
        store.dispatch(action)
    }
}

View Code

store/index.js

import { createStore } from ‘redux‘;
import reducer from ‘./reducer‘;

const store = createStore(
        reducer, 
        window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
        )

export default store;

View Code

store/reducer.js

const defaultState = {
    inputValue: ‘‘,
    list:[]
}

export default (state = defaultState, action) => {

    if (action.type === ‘input_change‘){
        let newState = JSON.parse(JSON.stringify(state));
        newState.inputValue = action.value;
        return newState;
    }
    if (action.type === ‘add_item‘){
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.push(newState.inputValue);
        newState.inputValue = ‘‘;
        return newState;
    }
    if (action.type === ‘delete_item‘){
        let newState = JSON.parse(JSON.stringify(state));
        newState.list.splice(action.index, 1)
        return newState;
    }
    return state;
}

View Code