redux（一）- 简述

December 26, 2020 · 2 min read

解柒

Redux 是 JavaScript 状态容器，提供可预测化的状态管理。解决在大型应用中，状态过多难以维护的问题。

核心概念#

应用中所有的 State 都以一个对象树的形式存储在一个单一 Store 中。唯一改变 State 的方法是触发 Action（描述需要怎样修改 State），使用者编写相应的 reducer 实现修改 State 的步骤。

核心逻辑图

Store#

Store 是一个容器，用于存储所有的状态（State），并提供一系列的 API 用户操作该容器，如：

提供 getState() 方法获取 state;
提供 dispatch(action) 方法更新 state；
通过 subscribe(listener) 注册监听器;
通过 subscribe(listener) 返回的函数注销监听器。

Action#

Action 是把数据从应用传到 Store 的有效载体，是 Store 数据的唯一来源。可通过 Store.dispatch(action) 将 action 传到 Store。

Reducer#

Reducer 是一个纯函数，描述如何根据 action 修改应用状态。

小结#

总结核心概念可以用三大原则来描述：

单一数据源：有且仅有一个 Store；
State 是只读的：唯一改变 State 的方法是通过 dispatch 触发 Action，Action 是用来描述需要怎么改变 State 的唯一标识及数据载体；
使用纯函数来修改：实现纯函数 reducer 描述具体如何修改 State。

数据流#

严格的单向数据流是 Redux 架构的设计核心。这意味着应用中所有的数据都遵循相同的生命周期，这样可以让应用变得更加可预测且容易理解。同时也鼓励做数据范式化，这样可以避免使用多个且独立的无法相互引用的重复数据。

Redux 应用中数据的生命周期遵循以下 4 个步骤：

调用 store.dispatch(action) 。
Redux store 调用传入的 reducer 函数，reducer(state, action)。
根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树。
Redux 提供了函数 combineReducers(reducers)，可用于将多个 reducer 合并成一个 rootReducer。
Redux store 保存了根 reducer 返回的完整 state 树。

简单举例#

const { createStore } = require('redux');

// 设置初始值
const initState = {
    num: 1,
};

function reducer(state = initState, action) {
    switch (action.type) {
        case 'increase':
            return { ...state, num: state.num + (action.num || 1) };
        case 'decrease':
            return { ...state, num: state.num - (action.num || 1) };
        default:
            return state;
    }
}

const store = createStore(reducer);

// 订阅，当state发生变化时，执行传入的回调函数。
store.subscribe(() => console.log(store.getState()));

const action1 = { type: 'increase' };
const action2 = { type: 'increase', num: 2 };
const action3 = { type: 'decrease', num: 3 };

// 将 action 通过 dispatch 发出
store.dispatch(action1); // { num: 1 }
store.dispatch(action2); // { num: 4 }
store.dispatch(action3); // { num: 1 }

近期文章