如何通俗易懂地理解Redux?

时间:2021-09-16 14:46:08

下文来自知乎,原文链接:理解 React,但不理解 Redux,该如何通俗易懂的理解 Redux?

 

解答这个问题并不困难:唯一的要求是你熟悉React。

不要光听别人描述名词,理解起来是很困难的。

从需求出发,看看使用React需要什么:

1. React 有 props 和 state: props 意味着父级分发下来的属性,state 意味着组件内部可以自行管理的状态,并且整个 React 没有数据向上回溯的能力,也就是说数据只能单向向下分发,或者自行内部消化。

理解这个是理解 React 和 Redux 的前提。

2. 一般构建的 React 组件内部可能是一个完整的应用,它自己工作良好,你可以通过属性作为 API 控制它。但是更多的时候发现React根本无法让两个组件互相交流,使用对方的数据。

然后这时候不通过 DOM 沟通(也就是 React *内)解决的唯一办法就是提升 state ,将 state 放到共有的父组件中来管理,再作为 props 分发回子组件

3. 子组件改变父组件 state 的办法只能是通过 onClick 触发父组件声明好的回调,也就是父组件提前声明好函数或方法作为契约描述自己的 state 将如何变化,再将它同样作为属性交给子组件使用。

这样就出现了一个模式:数据总是单向从顶层向下分发的,但是只有子组件回调在概念上可以回到 state 顶层影响数据。这样 state 一定程度上是响应式的。

4. 为了面临所有可能的扩展问题,最容易想到的办法就是把所有 state 集中放到所有组件顶层,然后分发给所有组件

5. 为了有更好的 state 管理,就需要一个库来作为更专业的顶层 state 分发给所有 React 应用,这就是 Redux。让我们回来看看重现上面结构的需求:

a. 需要回调通知 state (等同于回调参数) -> action

b. 需要根据回调处理 (等同于父级方法) -> reducer

c. 需要 state (等同于总状态) -> store

 

对 Redux 来说只有这三个要素:

a. action 是纯声明式的数据结构,只提供事件的所有要素,不提供逻辑。

b. reducer 是一个匹配函数,action 的发送是全局的:所有的 reducer 都可以捕捉到并匹配与自己相关与否,相关就拿走 action 中的要素进行逻辑处理,修改 store 中的状态,不相关就不对 state 做处理原样返回。

c. store 负责存储状态并可以被 react api 回调,发布 action.

 

当然一般不会直接把两个库拿来用,还有一个 binding 叫 react-redux, 提供一个 Provider connect。很多人其实看懂了redux 卡在这里。

a. Provider 是一个普通组件,可以作为顶层 app 的分发点,它只需要 store 属性就可以了。它会将state分发给所有被 connect 的组件,不管它在哪里,被嵌套多少层。

b. connect 是真正的重点,它是一个科里化函数,意思是先接受两个参数(数据绑定mapStateToProps和事件绑定mapDispatchToProps),再接受一个参数(将要绑定的组件本身)

mapStateToProps:构建好Redux系统的时候,它会被自动初始化,但是你的 React 组件并不知道它的存在,因此你需要分拣出你需要的 Redux 状态,所以你需要绑定一个函数,它的参数是 state,简单返回你关心的几个值。

mapDispatchToProps:声明好的 action 作为回调,也可以被注入到组件里,就是通过这个函数,它的参数是 dispatch,通过redux的辅助方法 bindActionCreator 绑定所有action以及参数的 dispatch,就可以作为属性在组件里面作为函数简单使用了,不需要手动 dispatch。这个 mapDispatchToProps 是可选的,如果不传这个参数 redux 会简单把 dispatch 作为属性注入给组件,可以手动当做 store.dispatch 使用。这也是为什么要科里化的原因。

 

做好以上流程Redux和React就可以工作了。简单地说就是:

1.顶层分发状态,让 React 组件被动地渲染。

2.监听事件,事件有权利回到所有状态顶层影响状态。 作者:Wang Namelos
链接:https://www.zhihu.com/question/41312576/answer/90782136
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。