redux 1.概念

学习时写下文章以后容易复习，也可以供其他学习的人一些参考
本篇文将从概念、action、reducer、store、在react中使用、TodoList实例 7个部分分成7篇文章依次展开
参考资料：
redux自述
如有错误，欢迎指正

redux是什么？

　简单的理解，redux是管理react state的工具（本文redux只用于react，不考虑其他框架）

为什么需要redux?

　react中的state在简单的应用逻辑上还比较容易处理，但是对于过于复杂的应用，数据向下传递的次数多时就很费脑子了，容易出错，修改也不容易，尤其在react的【状态提升】问题比较大
　redux+-把state统一管理，你可以想象它把所有的state放在了一起，组成一个全局的普通对象（state），当你需要其中的值时，通过key获取即可，比较特别的是当需要更新值时，你必须通过返回一个新的state以覆盖原来的值。

redux三个部分

1. reducer => 创建更新state

　reducer 是个返回state的函数，由它更新state

2. action => 要更新的数据

　action 是一个对象，里面存的是要更新的数据，当然你需要指定key去更新哪部分数据

3. store => 数据库，里面放着state，这部分是核心

　store 是一个redux根据reducer生产的数据库对象，主要用来存放数据

三者的关系：

1. 通过多个reducer实例化store，并在store里产生初始的state
2. 需要更新state时，调用store的方法传入action即可完成数据更新

可见redux整体思路很简单，下面举个简单的例子熟悉下过程

---

例子 ：点击按钮输入框值加减一

假设你需要做个这样的app

<div>    <input type="text" value="0" />    <input type="button" value="加1">    <input type="button" value="减1"></div>

用react做的思路大概是这个样子：

1 列表内容

state 控制输入框的显示值，初始值是0

this.state={    num:0}

2 列表内容

两个按钮分别有一个事件，点击时改变state，这样输入框显示的值也就改变了

handleClick:function(){    this.setState((pre)=>({        num:++pre.num //--pre.num    }))}

现在用redux改造它：值的显示不再由state控制，改为redux store控制

1 reudcer，创建 store 之前需要创建reducer，以获得state

function reducer(state,action){//state占位必需的形参，action里存了要更新的数据    if(state===undefined)        state={num:0}    switch (action.type){        case '+1':            return {num:++state.num}            break        case '-1':            return {num:--state.num}            break        default:            return state    }}

2 store，初始的state是通过reducer的default获得的

const store = createStore(reducer);

3 获取输入框的数据显示

store.getState();//{num:0}

4 添加事件，由它更新store里的state，进而更新ui

var action={    type:'+1' //-1}store.dispatch(action) //这样就完成了数据更新

以上基本就完成了redux改造，还需要提一些点：

• redux实际也是个组件而已，使用它必须包裹在redux组件内部，store提供了函数完成包裹

store.subscribe(fn) //fn里返回你的组件

• action可能有很多，可以通过一些函数生成action减少数量，再将这些函数一起在一个单独的文件里

• reducer可以拆分多个，分别处理不同类的业务，然后通过函数合并成一个

combineReducers({    reducer1,    reducer2,    ...})