Redux 是一种非常流行的状态管理库，它的核心思想是将应用程序的状态存储在一个单一的 store 中，并通过 action 触发 reducer 来更新状态。然而，当我们在编写 Redux 应用程序时，很容易陷入一些坑中，其中之一是 store 中的循环引用。
循环引用是指两个或多个对象之间的相互引用，形成了一个无限循环的链。在 Redux 应用程序中，循环引用通常出现在 reducer 中，因为 reducer 是用来更新 store 中的状态的。当 reducer 中的一个对象引用 store 中的另一个对象时，就会出现循环引用。
循环引用可能会导致应用程序的状态变得混乱或不一致。因此，我们需要避免在 reducer 中出现循环引用。下面是一些避免循环引用的建议。
不要在 reducer 中直接引用 store
在编写 reducer 时，我们应该避免直接引用 store 中的对象。相反，我们应该将 store 中的对象作为参数传递给 reducer。这样可以避免 reducer 和 store 之间的循环引用。
例如，下面的代码中，reducer 直接引用了 store 中的对象：
const reducer = (state, action) => { const { todos } = store.getState(); // ... };
我们应该改为将 store 中的对象作为参数传递给 reducer：
const reducer = (state, action, { todos }) => { // ... };
将 reducer 拆分成更小的函数
如果一个 reducer 变得过于复杂，就容易出现循环引用。因此，我们应该将 reducer 拆分成更小的函数，每个函数负责更新一个特定的状态。
例如，下面的代码中，reducer 负责更新两个状态：
-- -------------------- ---- ------- ----- ------- - ------- ------- -- - ----- - ------ ---------------- - - ------ ------ ------------- - ---- ----------- -- --- ---- ------------------------ -- --- -------- ------ ------ - --展开代码
我们应该将 reducer 拆分成两个函数：
-- -------------------- ---- ------- ----- ------------ - ------- ------- -- - ------ ------------- - ---- ----------- -- --- -------- ------ ------ - -- ----- ----------------------- - ------- ------- -- - ------ ------------- - ---- ------------------------ -- --- -------- ------ ------ - --展开代码
使用 combineReducers
Redux 提供了一个 combineReducers 函数，可以将多个 reducer 合并成一个。使用 combineReducers 可以帮助我们避免 reducer 之间的循环引用。
例如，下面的代码中，我们将两个 reducer 合并成一个：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ----- ------------ - ------- ------- -- - -- --- -- ----- ----------------------- - ------- ------- -- - -- --- -- ----- ----------- - ----------------- ------ ------------- ----------------- ------------------------ ---展开代码
示例代码
下面是一个使用 Redux 的示例应用程序，它包含两个 reducer：todosReducer 和 visibilityFilterReducer。todosReducer 负责更新 todos 状态，visibilityFilterReducer 负责更新 visibilityFilter 状态。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ----- -------- - ----------- ----- --------------------- - ------------------------ ----- ------------ - ------ - --- ------- -- - ------ ------------- - ---- --------- ------ - --------- - --- ---------- ----- ------------ ---------- ------ -- -- -------- ------ ------ - -- ----- ----------------------- - ------ - ----------- ------- -- - ------ ------------- - ---- ---------------------- ------ -------------- -------- ------ ------ - -- ----- ----------- - ----------------- ------ ------------- ----------------- ------------------------ --- ----- ----- - ------------------------- ----- ------- - ------ -- -- ----- --------- --- ----------- ----- --- ----- ------------------- - -------- -- -- ----- ---------------------- ------- --- --------------------------- -------- ------------------------------------------------------展开代码
在上面的示例代码中，我们避免了 reducer 之间的循环引用，并且将 reducer 拆分成了更小的函数。我们还使用了 combineReducers 函数将两个 reducer 合并成了一个。这些技术可以帮助我们编写更安全和可维护的 Redux 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cafb02e46428fe9e39a043
