redux--基本使用

redux的工作流程

    组件发出指令（actionCreator）到中间层（store），由中间层查找指令对应的指令回调（reducer）处理并return value（state）

安装redux

    cnpm i redux --save

示例-todolist

    在page文件夹下新建todalist.js，从antd引入list、input、button组件，代码如下

效果如下

创建store

    在page文件夹下创建store文件夹，为了做模块化处理，在该文件夹下创建index.js，作为redux的根入口，同时创建reducer.js作为组件发出指令的操作集合

    index.js

（从redux引入创建store的接口，并与reducer建立关联，同时初始化调试工具，最后导出供外部组件使用）

    reducer.js

（初始化一个空仓库，并导出供createStore创建关联）

组件连接redux

    引入redux

    建立连接

将数据存放到redux中

    将list和input的值从组件中摘除，存放到redux中，找到reducer.js，修改defaulfState如下

    同时在组件中将写死的data删除，改用state中的数据

派发指令（更新input的值）

    向input组件添加onChange事件，获取每一次用户的输入内容

    当用户输入改变时派发指令

（指令名称为'change-input-value'，值为每一次用户输入的值，接着就是通知redux来活了）

向redux发出通知

（redux此时已经接收到我们发出的指令，但是此时它还不知道该怎么处理，因为我们还没有编写该指令所对应的回调事件）

指令的回调处理

（组件派发的指令会被redux接收，具体来说是它的store中间层，当store接收到指令时，会将上一次的state和组件派发的指令转发给reducer；由于只有中间层store有处理state的权限，因此我们需要拷贝一份并返回给store由其比对更新）

订阅redux update

（通过redux提供的subscribe接口订阅store变更，并重新赋值state）

接着，为了方便管理，将生成指令单独拆成一个文件（actionCreators）并在reducer和todolist中引用

    在store下新建文件actionTypes

（统一管理指令名称，可在一定程度上避免拼写等低级错误）

    在store下新建文件actionCreators

（这里统一对指令进行管理，当组件内逻辑庞大时能在一定程度上减负）

        组件内使用

最后，模拟下axios请求

    在todolist组件中的componentDidMount中发起请求并派发指令

（数据是json-server模拟的）

        在actionTypes中创建指令名称

        在actionCreators中创建action

        最后在reducer中处理action

   

---

至此，redux的基本使用就全部结束啦，感兴趣的同学可以继续将todolist的剩余功能完善即：点击提交按钮向list增加一条数据并清空input，点击item则删除list中对应的数据