在动作创建者中访问 Redux 状态? [英] Accessing Redux state in an action creator?

问题描述

假设我有以下内容:

export const SOME_ACTION = 'SOME_ACTION';
export function someAction() {
  return {
    type: SOME_ACTION,
  }
}

在那个动作创建者中，我想访问全局存储状态(所有减速器).这样做是否更好:

And in that action creator, I want to access the global store state (all reducers). Is it better to do this:

import store from '../store';

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

或者这个:

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

    dispatch(anotherAction(items));
  }
}

推荐答案

对于在 action creators 中访问 state 是否是一个好主意有不同的意见:

There are differing opinions on whether accessing state in action creators is a good idea:

• Redux 创建者 Dan Abramov 认为它应该受到限制:我认为可以接受的少数用例是在您发出请求之前检查缓存数据，或者检查您是否通过身份验证(换句话说，做一个有条件的dispatch).我认为在动作创建者中传递数据(例如state.something.items)绝对是一种反模式并且不鼓励，因为它掩盖了更改历史记录:如果有一个 bug 并且 items 不正确，很难追踪这些不正确的值来自哪里，因为它们已经是动作的一部分，而不是由减速器直接计算响应某个操作.因此请谨慎操作."
• 现任 Redux 维护者 Mark Erikson 说这很好，甚至鼓励在 thunk 中使用 getState - 这就是它存在的原因.他在他的博客文章 惯用的 Redux:关于 Thunks、Sagas、抽象和可重用性的思考.

• Redux creator Dan Abramov feels that it should be limited: "The few use cases where I think it’s acceptable is for checking cached data before you make a request, or for checking whether you are authenticated (in other words, doing a conditional dispatch). I think that passing data such as state.something.items in an action creator is definitely an anti-pattern and is discouraged because it obscured the change history: if there is a bug and items are incorrect, it is hard to trace where those incorrect values come from because they are already part of the action, rather than directly computed by a reducer in response to an action. So do this with care."
• Current Redux maintainer Mark Erikson says it's fine and even encouraged to use getState in thunks - that's why it exists. He discusses the pros and cons of accessing state in action creators in his blog post Idiomatic Redux: Thoughts on Thunks, Sagas, Abstraction, and Reusability.

如果你发现你需要这个，你建议的两种方法都可以.第一种方法不需要任何中间件:

If you find that you need this, both approaches you suggested are fine. The first approach does not require any middleware:

import store from '../store';

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

但是你可以看到它依赖于 store 作为从某个模块导出的单例.我们不建议这样做，因为它使添加服务器渲染变得更加困难到您的应用，因为在大多数情况下在服务器上，您希望每个请求都有一个单独的存储.因此，虽然从技术上讲这种方法有效，但我们不建议从模块导出商店.

However you can see that it relies on store being a singleton exported from some module. We don’t recommend that because it makes it much harder to add server rendering to your app because in most cases on the server you’ll want to have a separate store per request. So while technically this approach works, we don’t recommend exporting a store from a module.

这就是我们推荐第二种方法的原因:

This is why we recommend the second approach:

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

    dispatch(anotherAction(items));
  }
}

它需要您使用 Redux Thunk 中间件，但它在客户端和服务器上都可以正常工作.您可以阅读有关 Redux Thunk 的更多信息以及为什么在这种情况下有必要 这里.

It would require you to use Redux Thunk middleware but it works fine both on the client and on the server. You can read more about Redux Thunk and why it’s necessary in this case here.

理想情况下，您的操作不应该是胖"的，并且应该包含尽可能少的信息，但是您应该在自己的应用程序中随意做最适合您的操作.Redux 常见问题有关于 在 action creators 和 reducers 之间拆分逻辑 和 在某些情况下使用 getState 可能有用动作创建者.

Ideally, your actions should not be "fat" and should contain as little information as possible, but you should feel free to do what works best for you in your own application. The Redux FAQ has information on splitting logic between action creators and reducers and times when it may be useful to use getState in an action creator.

这篇关于在动作创建者中访问 Redux 状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！