如何访问 Redux 动作生成器中的状态？两种方法全面解析

2024-03-12 07:02:28

Redux 动作生成器中的 Redux 状态访问：两种方法

引言

Redux 是一种流行的状态管理工具，用于管理应用程序的状态。动作生成器函数用于创建表示应用程序状态更改的动作。有时，动作生成器可能需要访问全局存储状态以确定要执行的操作。在本文中，我们将探讨两种不同的方法来在动作生成器中访问 Redux 状态。

方法 1：使用 `store` 模块

第一种方法是使用 store 模块直接访问全局存储状态。这可以通过以下方式实现：

import store from '../store';

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
    items: store.getState().otherReducer.items,
  }
}

在这里，store.getState().otherReducer.items 访问其他归约器（在这种情况下为 otherReducer）管理的状态片段。

方法 2：使用 `getState` 函数

第二种方法是使用 getState 函数，该函数通过 dispatch 函数作为动作生成器函数的参数传递。这可以通过以下方式实现：

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return (dispatch, getState) => {
    const {items} = getState().otherReducer;

    dispatch(anotherAction(items));
  }
}

在这里，getState().otherReducer.items 访问 otherReducer 管理的状态片段。然后，可以使用 dispatch 函数分派其他动作（例如 anotherAction），该动作将接收 items 作为参数。

哪种方法更好？

两种方法各有优缺点。使用 store 模块的方法更直接、更简单。然而，它也违背了 Redux 的最佳实践，因为 Redux 建议避免直接访问存储，而是使用 dispatch 和 getState 函数。

使用 getState 函数的方法符合 Redux 的最佳实践，因为它提供了更解耦和可测试的方式来访问存储状态。它还允许动作生成器异步分派动作。

结论

在动作生成器中访问 Redux 状态有两种主要方法：使用 store 模块和使用 getState 函数。虽然 store 模块的方法更简单，但 getState 函数的方法更符合 Redux 的最佳实践。最终，选择哪种方法取决于应用程序的具体需求和偏好。

常见问题解答

为什么应该使用 getState 函数而不是直接访问 store？

使用 getState 函数符合 Redux 的最佳实践，因为它提供了更解耦和可测试的方式来访问存储状态。它还允许动作生成器异步分派动作。
什么时候应该使用异步动作生成器？

当动作生成器需要执行异步操作（例如网络请求）时，应该使用异步动作生成器。
如何测试使用 getState 函数的动作生成器？

使用 redux-mock-store 或类似库来模拟存储并验证动作生成器调用的 getState 函数的结果。
是否可以在动作生成器中使用 useSelector 钩子？

是的，可以在动作生成器中使用 useSelector 钩子。这可以是一个有用的选择，因为它可以防止在组件中重复的代码。
什么时候应该避免使用动作生成器？

当操作可以在组件中直接执行时，应该避免使用动作生成器。这有助于减少应用程序的复杂性和代码量。