React 入门（5）Redux

序言

1.什么是redux?

全局数据状态管理工具（状态管理机），用来做组件通信等。

2.为什么使用redux?Redux解决了什么问题？

当没有使用redux时兄弟组件间传值将很麻烦，代码很复杂冗余。

使用redux定义全局单一的数据Store，可以自定义Store里面存放哪些数据，整个数据结构也是自己清楚的。

yarn add redux

yarn add redux-devtools-extension

 

1、创建 store

const store = createStore(reducer);

 

<Provider store={store}>

      <CountCon />

</Provider>

 

纯函数 Pure Function
定义：一个函数的返回结果只依赖于它的参数，并且在执行的过程中没有副作用，我们就把该函数称作纯函数。

副作用

UI组件

无状态组件

Javascript中的Generator函数和yield关键字

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请求。

在配置了redux-thunk这个中间件的情况下，你发起的任何action方法，都会走thunk这个中间件，一旦方法体内没有dispatch这个方法，则会报Actions must be plain objects. Use custom middleware for async actions这个异常。

作者：子喻爱吃黄焖鸡
链接：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就可以了如下：

class TodoList extends React.Component<any, any> {}

小结：一定要动手实践，不断转变思路，触类旁通。

• redux是一个可预测的状态容器，
• react-redux是将store和react结合起来，使得数据展示和修改对于react项目而言更简单
• redux中间件就是在dispatch action前对action做一些处理
• redux-thunk用于对异步做操作
• redux-actions用于简化redux操作
• redux-promise可以配合redux-actions用来处理Promise对象，使得异步操作更简单
• redux-saga可以起到一个控制器的作用，集中处理边际效用，并使得异步操作的写法更优雅。

资料

Redux介绍

Redux 中文文档

使用 TypeScript + React + Redux 进行项目开发（入门篇，附源码）

react-redux实践

使用 TypeScript + React + Redux 进行项目开发（入门篇，附源码）

https://www.jianshu.com/p/258fa7f7e079