在动作创建者中访问Redux状态？

Question

在动作创建者中访问Redux状态？说我有以下内容：export const SOME_ACTION = 'SOME_ACTION';export function someAction() {   return {     type: SOME_ACTION,   }}在该动作创建者中，我想访问全局存储状态（所有reducers）。这样做更好：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));   }}

Answer 1

关于在动作创作者中访问状态是否是一个好主意，存在不同的意见。我认为可接受的少数用例是在您发出请求之前检查缓存数据，或者检查您是否经过身份验证（换句话说，执行条件派遣）。我认为，通过数据如state.something.items在行动的创建者绝对是一个反模式和气馁，因为它掩盖了改变历史：如果有一个错误，items是不正确的，这是很难追查，其中那些不正确的值来自于，因为它们是已经是动作的一部分，而不是由reducer直接计算以响应动作。所以要小心这样做。（有关在动作创建者中访问状态的利弊的进一步讨论，请参阅博客文章惯用的Redux：关于Thunk，Sagas，Abstraction和Reusability的思考。）

如果您发现需要这个，那么您建议的两种方法都可以。第一种方法不需要任何中间件：

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

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

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

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

    dispatch(anotherAction(items));
  }}

它需要您使用Redux Thunk中间件，但它在客户端和服务器上都可以正常工作。您可以在此处阅读有关Redux Thunk的更多信息以及为什么需要它。

理想情况下，您的行为不应该“胖”，并且应该包含尽可能少的信息，但您应该随意在自己的应用程序中做最适合您的操作。的终极版FAQ对信息行动的创作者和减速器之间拆分逻辑和时间时，它可以是使用有用的getState一个动作的创造者。

Answer 2

当您的场景很简单时，您可以使用

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

但有时你action creator需要触发多项行动

例如异步请求所以你需要 REQUEST_LOAD REQUEST_LOAD_SUCCESS REQUEST_LOAD_FAIL动作

export const [REQUEST_LOAD, REQUEST_LOAD_SUCCESS, REQUEST_LOAD_FAIL] = [`REQUEST_LOAD`
    `REQUEST_LOAD_SUCCESS`
    `REQUEST_LOAD_FAIL`]export function someAction() {
    return (dispatch, getState) => {
        const {
            items        } = getState().otherReducer;
        dispatch({
            type: REQUEST_LOAD,
            loading: true
        });
        $.ajax('url', {
            success: (data) => {
                dispatch({
                    type: REQUEST_LOAD_SUCCESS,
                    loading: false,
                    data: data                });
            },
            error: (error) => {
                dispatch({
                    type: REQUEST_LOAD_FAIL,
                    loading: false,
                    error: error                });
            }
        })
    }}

注意：你需要redux-thunk来在动作创建者中返回功能

Answer 3

我想指出，从商店中读取并不是那么糟糕 - 根据商店决定应该做什么可能更方便，而不是将所有内容传递给组件然后作为参数一个功能。我完全赞同Dan，最好不要将商店用作单例，除非你100％确定你只会用于客户端渲染（否则很难跟踪错误）。

我最近创建了一个库来处理redux的冗余，我认为将所有内容都放在中间件中是个好主意，所以你将allhing作为依赖注入。

所以，你的例子看起来像这样：

import { createSyncTile } from 'redux-tiles';const someTile = createSyncTile({
  type: ['some', 'tile'],
  fn: ({ params, selectors, getState }) => {
    return {
      data: params.data,
      items: selectors.another.tile(getState())
    };
  },});

但是，正如您所看到的，我们并没有真正修改数据，因此很有可能我们可以在其他地方使用此选择器将其组合到其他位置。