Redux

Redux的特色

1. 统一的状态管理，一个应用中只有一个仓库（store）
2. 仓库中管理了一个状态树（statetree）
3. 仓库不能直接修改，修改只能经过派发器（dispatch）派发一个动做（action）
4. 更新state的逻辑封装到reducer中

Redux能作什么？

随着JavaScript单页应用开发日趋复杂，管理不断变化的state很是困难，Redux的出现就是为了解决state里的数据问题。在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件(经过props)，因为这个特征，两个非父子关系的组件（或者称做兄弟组件）之间的通讯就比较麻烦

 

redux.png

redux中各对象的说明

store

store是一个数据仓库，一个应用中store是惟一的，它里面封装了state状态，当用户想访问state的时候，只能经过store.getState来取得state对象，而取得的对象是一个store的快照，这样就把store对象保护起来。

action

action描述了一个更新state的动做，它是一个对象，其中type属性是必须有的，它指定了某动做和要修改的值：

{type: UPDATE_TITLE_COLOR, payload: 'green'} 

actionCreator

若是每次派发动做时都写上长长的action对象不是很方便，而actionCreator就是建立action对象的一个方法，调用这个方法就能返回一个action对象，用于简化代码。

dispatch

dispatch是一个方法，它用于派发一个动做action，这是惟一的一个可以修改state的方法，它内部会调用reducer来调用不一样的逻辑基于旧的state来更新出一个新的state。

reducer

reducer是更新state的核心，它里面封装了更新state的逻辑，reducer由外界提供（封装业务逻辑，在createStore时传入），并传入旧state对象和action，将新值更新到旧的state对象上返回。

使用redux的流程

1. 定义动做类型：

const INCREAMENT='INCREAMENT'; 

2. 定义项目的默认状态，传入reducer

let initState={...}; function reducer(state=initState,action){ //... } 

3. 编写reducer，实现更新state的具体逻辑

function reducer(state=initState,action){ let newState; switch(action.type){ //... } return newState; } 

4. 建立容器，传入reducer

let store=createStore(reducer); 

5. 订阅须要的方法，当state改变会自动更新

store.subcribe(function(){}); 

6. 在须要更新state的地方调用dispatch便可

store.dispatch(/*某个action*/); 

能够看到经过以上几个步骤，就可使用redux，且不局限于某种“框架”中，redux是一个设计思想，只要符合你的需求就可使用redux。

在React中使用Redux

如下编写一个待办事项的小功能，描述以下：

• 可让用户添加待办事项（todo）
• 能够统计出还有多少项没有完成
• 用户能够勾选某todo置为已完成
• 可筛选查看条件（显示所有、显示已完成、显示未完成）