ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

如何在react中使用redux

2021-12-19 19:31:05  阅读:200  来源: 互联网

标签:dispatch react 如何 state connect 组件 redux


安装命令:

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

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

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

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

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

 这里按照步骤来说明 

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

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

就像这样  必须要合并

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把你的跟组件包起来  并且给他想要的仓库名字

 

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

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

如果你要修改他的值的话 你想要用到dispatch派发任务来进行派发 

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

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

标签:dispatch,react,如何,state,connect,组件,redux
来源: https://blog.csdn.net/m0_59993469/article/details/122027962

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有