序言
1.什么是redux?
全局数据状态管理工具(状态管理机),用来做组件通信等。
2.为什么使用redux?Redux解决了什么问题?
当没有使用redux
时兄弟组件间传值将很麻烦,代码很复杂冗余。
使用redux
定义全局单一的数据Store
,可以自定义Store
里面存放哪些数据,整个数据结构也是自己清楚的。
yarn add redux
yarn add redux-devtools-extension
定义:一个函数的返回结果只依赖于它的参数,并且在执行的过程中没有副作用,我们就把该函数称作纯函数。
redux
Redux中主要由三部分组成:Action Reducer Store
https://github.com/brickspert/blog/issues/22
https://github.com/zalmoxisus/redux-devtools-extension#usage
Action
Store
Reducer
react-redux
yarn add react-redux
redux-中间件
redux-thunk
yarn add react-thunk
为什么要使用redux-thunk?
因为我们把ajax请求的异步操作放在生命周期函函数里面, 不便于管理。
使用redux-thunk中间件,我们可以在action构造器中返回一个函数,而不仅仅是一个对象。
react-thunk作用:使我们可以在action中返回函数,而不是只能返回一个对象。然后我们可以在函数中做很多事情,比如发送异步的ajax请求。
作者:子喻爱吃黄焖鸡
链接:https://www.jianshu.com/p/4814d3b4da1b
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
redux-saga
异步操作的写法更优雅
yarn add react-saga
https://blog.csdn.net/TurkeyCock/article/details/88390208
redux-saga和redux-thunk一样,是用于处理redux应用异步请求的中间件,reduxsaga通过创建sagas来把所有的异步请求集中处理,方便维护。
redux-actions
redux-promise
遇到的问题
React TypeScript 报错 Readonly 不存在属性"字段名"
在类声明的时候加入<any, any>
, 将props
和state
类型定义成any
就可以了如下:
小结:一定要动手实践,不断转变思路,触类旁通。
- redux是一个可预测的状态容器,
- react-redux是将store和react结合起来,使得数据展示和修改对于react项目而言更简单
- redux中间件就是在dispatch action前对action做一些处理
- redux-thunk用于对异步做操作
- redux-actions用于简化redux操作
- redux-promise可以配合redux-actions用来处理Promise对象,使得异步操作更简单
- redux-saga可以起到一个控制器的作用,集中处理边际效用,并使得异步操作的写法更优雅。
资料
使用 TypeScript + React + Redux 进行项目开发(入门篇,附源码)