1.工作流程

image.png

拟人理解：
Component相当于用户提出需求(Action Creators)然后通知到管理员(Store)使用一些命令到记录本(Reducers)中查询数据并做更新操作等。

2.创建store，下载redux devtools拓展工具

image.png

image.png

3.创建reducer

image.png

4.在组件中的使用

image.png

render(){
        return (
            <div>
                <Input 
                value={this.state.inputValue} 
                style={{width: 300}}
                onChange={this.handleInputChange}
                ></Input>
                <Button type="primary" onClick={this.handleButtonClick}>提交</Button>
                <List
                    bordered
                    dataSource={this.state.list}
                    renderItem={item => (
                    <List.Item>
                        {item}
                    </List.Item>
      )}
    />
            </div>
        )
    }

按钮绑定事件

handleInputChange(e){
        const action = {
            type:'change_input_value',
            value:e.target.value
        }
        store.dispatch(action)
    }
 handleButtonClick(){
        const action = {
            type: 'add_todo_item',
        };
        store.dispatch(action);
    }

redux通过action来告诉store要更新数据，action为一个对象，需要type属性来描述要做的事情，value来传输更新的数据，dispatch方法来传递给store，这里store会自动处理并转发给reducer。

image.png

reducer的默认两个参数，state 是当前的状态，可以设置默认值，action为传递来的新数据。
（reducer为纯函数，给定固定的输入，就一定会有固定的输出，而且不会有任何副作用：如果 赋值 new Date(); 或ajax请求就不是固定输入不是纯函数。如果修改了原参数，对参数做了额外的修改产生了副作用，则也不是纯函数）
使用action的type来判断要处理哪些事情后，拷贝一下原数据state，将action新数据复制到副本state，将副本state返回给store。

image.png

使用 subscribe 订阅功能，只要store改变就通知，执行handleStoreChange函数

image.png

此时当前组件的state就跟着更新，render函数执行，视图更新。

6.整合action的type和action方法

image.png

将action的所有type整合到一个文件方便测试和修改

image.png

将action函数整合到一个文件方便后续添加

image.png

在组件中使用整合的action方法

Redux API:
1.createStore 创建一个store
2.store.dispatch 派发action 将action传递给store
3.store.getState 获取到store中的所有数据内容
4.store.subscribe 订阅store的改变，只要store发生改变，此函数接收的回调函数自动执行