redux学习浅析

最新推荐文章于 2025-07-25 17:17:48 发布

原创最新推荐文章于 2025-07-25 17:17:48 发布 · 552 阅读

CC 4.0 BY-SA版权

原创首发，欢迎关注~！如需转载，请注明出处

文章标签：

97 篇文章

订阅专栏

45 篇文章

订阅专栏

28 篇文章

订阅专栏

写在前面：根据网上教程学习整理，感谢各位大佬们

是什么？为什么要用？怎么用？

数据流

Redux 的适用场景：多交互、多数据源。

从组件角度看，如果你的应用有以下场景，可以考虑使用 Redux。

发生上面情况时，如果不使用 Redux 或者其他状态管理工具，不按照一定规律处理状态的读写，代码很快就会变成一团乱麻。你需要一种机制，可以在同一个地方查询状态、改变状态、传播状态的变化。

（1）Web 应用是一个状态机，视图与状态是一一对应的。

（2）所有的状态，保存在一个对象里面。

所有的 state 都以一个对象树的形式储存在一个单一的 store 中。 惟一改变 state 的办法是触发 action，一个描述发生什么的对象。 为了描述 action 如何改变 state 树，你需要编写 reducers。	

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

createStore(fn)

Store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。

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

 一个 State 对应一个 View。只要 State 相同，View 就相同。

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

Action 描述当前发生的事情。改变 State 的唯一办法，就是使用 Action。它会运送数据到 Store

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

Action 就是 View 发出的通知，表示 State 应该要发生变化了。

Action 是一个对象

Store 收到 Action 以后，必须给出一个新的 State，这样 View 才会发生变化。这种 State 的计算过程就叫做 Reducer。

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

const reducer = function(state,action){return new_state}

action 就像是描述发生了什么的指示器。最终，为了把 action 和 state 串起来，开发一些函数，这就是 reducer。

reducer 只是一个接收 state 和 action，并返回新的 state 的函数。 对于大的应用来说，不大可能仅仅只写一个这样的函数，所以我们编写很多小函数来分别管理 state 的一部分

Reducer 函数不用像上面这样手动调用，store.dispatch方法会触发 Reducer 的自动执行。为此，Store 需要知道 Reducer 函数，做法就是在生成 Store 的时候，将 Reducer 传入createStore方法。

最好把 State 对象设成只读。你没法改变它，要得到新的 State，唯一办法就是生成一个新对象。这样的好处是，任何时候，与某个 View 对应的 State 总是一个不变的对象

Store 允许使用store.subscribe方法设置监听函数，一旦 State 发生变化，就自动执行这个函数

import { createStore } from 'redux';const store = createStore(reducer);store.subscribe(listener);

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

let unsubscribe = store.subscribe(() =>  console.log(store.getState()));unsubscribe();

createStore(x,x)//第一个参数为函数，第二个参数为state的初始状态，由服务器给出

三种 Action 分别改变 State 的三个属性。

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

Redux 提供了一个combineReducers方法，用于 Reducer 的拆分。你只要定义各个子 Reducer 函数，然后用这个方法，将它们合成一个大的 Reducer。就是 State 的属性名必须与子 Reducer 同名

首先，用户发出 Action。store.dispatch(action);

然后，Store 自动调用 Reducer，并且传入两个参数：当前 State 和收到的 Action。 Reducer 会返回新的 State 。let nextState = todoApp(previousState, action);

State 一旦有变化，Store 就会调用监听函数。// 设置监听函数store.subscribe(listener);

listener可以通过store.getState()得到当前状态。如果使用的是 React，这时可以触发重新渲染 View。

function listerner() {  

    let newState = store.getState();  

    component.setState(newState);   

}