如何在react中使用redux

安装命令:

yarn add react-redux 或者 npm i react-redux --save
npm i redux --save

这里不需要异步的话 就不需要再安装了 

首先 你创建一个redux的专属文件夹 应为 redux是js的库  他并不是react的  只是可以和他react配合使用  所以,你尽量为了代码的规范 创建一个专属的文件夹 

如何在react中使用redux

当然文件你随便起名字,你在文件里首先先引入他的方法

如何在react中使用redux

createStore是创建一个初始化仓库combineReducers是多个state方法进行合并的方法

如何在react中使用redux 这里按照步骤来说明 

1.创建一个state 并切赋值一个值,action是拿到你dispatch派发器派发来的任务 你可以自己试一试一步一步来 而其中 就是用js原生switch方法  来进行筛选   这里要注意 到最后你执行的每一步 都要把state返回  return出去  必须是要有返回值  而且不行把原来的state值覆盖  注意这一点 

2.这就是上面说的合并的方法  加入说你有很多的state,你就需要用到combineReducers方法进行合并如何在react中使用redux

就像这样  必须要合并

3.合并之后你就要把合并后的创建成你的仓库  这里就不用强调了把

4.把你的仓库抛出去  哪里用哪里取

connect

React-Redux提供一个connect方法能够把组件和store连接起来,把state,dispatch方法,捏合到当前组件上。

connect有两个参数,两参数都是函数,参数在connect内部被调用,参数内能拿到state和dispatch,详见代码示例。

connect调用的返回结果是一个高阶组件。

Provider

React-Redux 提供<Provider/>组件,能够使整个app访问到Redux store中的数据。

Provider是用context封装的。

如果你需要和react关联起来 你就需要用到这几个方法了

首先你要用Provider把你的跟组件包起来  并且给他想要的仓库名字

 

如何在react中使用redux

然后在你想要的组件里面用connect设置

如何在react中使用redux

 这样就可以再React组件里拿到redux的数据  这里要记住 因为这里的react 和redux 前面说过 他们是根本没有联系的  很显然 redux的东西根本不可以直接放到react组件的塞进去 而react更不可以直接来修改redux的数据  所以这里应该很明白了  他们是不相干的

如果你要修改他的值的话 你想要用到dispatch派发任务来进行派发 如何在react中使用redux

 你每次修改你一定要用dispatch派发器来派发任务 并且带上type值 这就是为什么上面需要用到switch来进行筛选了  

这里主要用的是简单的案例 当然还有异步操作的方法 这里就先不介绍了  可以说的不太全  欢迎来补充

上一篇:Redux学习(三)——redux-saga的使用、编写中间件函数、Reducer文件拆分


下一篇:Dva 概念