redux的理解与基本使用

一、redux的作用

管理各个组件公共的状态，是flux的升级版。

二、工作流程图

 文字理解：

 store中的数据渲染在组件上，在组件通过dispatch方法将要修改的数据放在action中传递给store，store将action中的数据传给reducers处理，reducers返回处理后的新数据返回给store，store运用getState()方法更新组件页面上的数据

三、使用

1、安装redux

cnpm i redux

2、在store下新建一个index.js，我这已经有一个index.js，所以新建一个文件名叫redux，引入createStore并实例化，导出该文件

 

 3，新建一个reducer.js文件存放state中数据及一个纯函数（输入和输出都不变的函数)

4，在redux.js文件中引入该文件并传参

 5，页面组件使用

 6，接下来实现修改数据

6-1 通过reduxStore中的自带方法dispatch传送action

 

 6-2 在reducer中纯函数进行接收 注意，store中的state的数据只可以读取，不允许修改，所以我们需要使用深拷贝 并将接收的新数据返回给store

 

 6-3通过reduxStore自带subscribe方法订阅更新组件视图层的数据

 在reducer.js中createStore有删除线  这是因为最新版引入方式发生改变，可以这样写消除删除线

 多人开发可以各自建一个reducer.js文件 然后通过combineReducers合并（相当于vuex中modules）

 以上就是redux的基本使用与理解。