react中dispatch_React详解react之redux

本文作者：开课吧木木
图文编辑：开三金

React的最后一篇基础课出来啦，前三节三金帮大家放到了专辑里，大家喜欢的可以去看哟。

Redux的核心概念

Redux 是一个独立的 JavaScript 状态管理库。曾经有人说过这样一句话。

"如果你不知道是否需要 Redux，那就是不需要它。"

Redux 的创造者 Dan Abramov 又补充了一句。

"只有遇到 React 实在解决不了的问题，你才需要 Redux 。"

首先，我们要理解 Redux 几个核心概念与它们之间的关系：

○store

○state

○action

○reducer

StoreStore就是保存数据的地方，你可以把它看成一个容器。整个应用只能有一个Store。

Redux提供createStore这个函数，用来生成Store：

上面代码中，createStore函数接受另一个函数作为参数，返回新生成的 Store 对象。

stateStore对象包含所有数据。如果想得到某个时点的数据，就要对Store生成快照。

这种时点的数据集合，就叫做State。

当前时刻的State,可以通过store.getState()拿到：

通过纯函数修改state

Redux 规定， 一个 State 对应一个 View。只要 State 相同，View 就相同。你知道 State，就知道 View 是什么样，反之亦然。

state是只读的。

这里需要注意的是，为了保证数据状态的可维护和测试，不推荐直接修改state中的原数据。

什么是纯函数？

1、相同的输入永远返回相同的输出

2、不修改函数的输入值

3、不依赖外部环境状态

4、无任何副作用

使用纯函数的好处？

1、便于测试

2、有利重构

ActionState 的变化，会导致 View 的变化。但是，用户接触不到 State，只能接触到 View。

所以，State 的变化必须是 View 导致的。Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象。其中的type属性是必须的，表示 Action 的名称。

其他属性可以自由设置:

生成和使用Action

Action CreatorView 要发送多少种消息，就会有多少种 Action。

如果都手写，会很麻烦。

可以定义一个函数来生成 Action，这个函数就叫 Action Creator。

store.dispatch()store.dispatch()是 View 发出 Action 的唯一方法。

结合 Action Creator，这段代码可以改写如下。

store.dispatch(addTodo('LearnRedux'));

ReducerStore 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。

这种 State 的计算过程就叫做 Reducer。

Reducer 是一个函数，它接受 Action 和当前 State 作为参数，返回一个新的 State：

整个应用的初始状态，可以作为 State 的默认值。

下面是一个实际的例子:

store.subscribe()Store 允许使用store.su-bscribe方法设置监听函数。

一旦 State 发生变化，就自动执行这个函数。

显然，只要把 View 的更新函数(对于 React 项目，就是组件的render方法或setState方法)放入listen，就会实现 View 的自动渲染。

store.subscribe方法返回一个函数，调用这个函数就可以解除监听:

Reducer 的拆分

Reducer 函数负责生成 State。

由于整个应用只有一个 State 对象，包含所有数据，对于大型应用来说。

这个 State 必然十分庞大，导致 Reducer 函数也十分庞大。

请看下面的例子:

上面代码中，三种 Action 分别改变 State 的三个属性:

ADD_CHAT：chatLog属性

CHANGE_STATUS：statusMessage属性

CHANGE_USERNAME：userName属性这三个属性之间没有联系。

这提示我们可以把 Reducer 函数拆分。

不同的函数负责处理不同属性，最终把它们合并成一个大的 Reducer 即可。

Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。

你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer:

这种写法有一个前提，就是 State 的属性名必须与子 Reducer 同名。

如果不同名，就要采用下面的写法:

下面是combineReducer的简单实现。

你可以把所有子 Reducer 放在一个文件里面，然后统一引入:

工作流程

首先，用户发出 Action。

    store.dispatch(action);

然后，Store 自动调用 Reducer，并且传入两个参数：

当前 State 和收到的 Action。 

Reducer 会返回新的 State 。

State 一旦有变化，Store 就会调用监听函数。

listener可以通过store.getState()得到当前状态。

如果使用的是 React，这时可以触发重新渲染 View。

Provider 组件：

想在 React 中使用 Redux ，还需要通过 react-redux 提供的 Provider 容器组件把 store 注入到应用中

connect 方法：

有了 connect 方法，我们不需要通过 props 一层层的进行传递， 类似路由中的 withRouter 

我们只需要在用到 store 的组件中，通过 react-redux 提供的 connect 方法。

把 store 注入到组件的 props 中就可以使用了

注入 state 到 props

connect 方法的第一个参数是一个函数

该函数的第一个参数就是 store 中的 state : store.getState()

该函数的返回值将被解构赋值给 props : this.props.items

redux-chunk

这是一个把同步 dispatch 变成异步 dispatch 的中间件。

安装：

到这里，关于React的基础篇就全部更新完啦~
接下来我们会制作一系列关于【图形选择】的干货文章，非常适合需要夯实前端基础的同学！
对于前端基础较高的同学，我们也会为大家分享优质、深入的前端领域干货

还有非常实用的小道具推荐，还有每周五必更的【三金叨叨叨】

更多好文都在【开课吧前端团队】

再次感谢各位小伙伴的支持~

你“在看”我吗？