访问行为创建者中的Redux状态?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

说我有以下几点:

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

在该操作创建者中,我希望访问全局存储状态(所有减速器)。这样做更好吗?

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));
  }
}
提问于
用户回答回答于

当场景很简单时,可以使用

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_LOADREQUEST_LOAD_SUCCESSREQUEST_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
                });
            }
        })
    }
}
用户回答回答于

数据state.something.items在操作中,创建者肯定是反模式的,并且不鼓励,因为它模糊了变更历史:如果有bug和items是不正确的,很难追踪。何地这些不正确的值来自于,因为它们已经是动作的一部分,而不是直接由还原器来响应动作。

第一种方法不需要任何中间件:

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));
  }
}

这将要求使用ReduxThunk中间件,但是它在客户机和服务器上都能正常工作。

扫码关注云+社区