在动作创建者中访问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));
  }
}

推荐答案

那里关于在动作创作者中访问状态是否是一个好主意是不同的意见。我认为可接受的少数用例是在您发出请求之前检查缓存数据，或者检查您是否经过身份验证（换句话说，执行条件派遣）。我认为在动作创建者中传递数据，例如 state.something.items 肯定是一种反模式，因为它模糊了变化而不鼓励历史记录：如果有错误并且项目不正确，则很难跟踪 这些不正确的值来自哪里，因为它们已经是动作，而不是由减速器直接计算以响应动作。所以要小心这样做。 （有关在动作创建者中访问状态的利弊的进一步讨论，请参阅博客文章惯用的Redux：关于Thunk，Sagas，Abstraction和Reusability的思考。）

There are differing opinions on whether accessing state in action creators is a good idea. 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. (For further discussion of the pros and cons of accessing state in action creators, see the 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,
  }
}

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

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常见问题解答包含有关在动作创建者和减少者之间分离逻辑的信息和使用<$ c $可能有用的时间c> 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屋！