redux的理解与基本使用

一、redux的作用

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

二、工作流程图

redux的理解与基本使用_第1张图片

 文字理解:

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

三、使用

1、安装redux

cnpm i redux

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

redux的理解与基本使用_第2张图片

 

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

redux的理解与基本使用_第3张图片

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

redux的理解与基本使用_第4张图片

 5,页面组件使用

redux的理解与基本使用_第5张图片

 6,接下来实现修改数据

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

redux的理解与基本使用_第6张图片

 

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

redux的理解与基本使用_第7张图片

 

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

redux的理解与基本使用_第8张图片

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

redux的理解与基本使用_第9张图片

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

redux的理解与基本使用_第10张图片

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

你可能感兴趣的:(react,前端,react.js)