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

Question

说我有以下内容:

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,
  }
}

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

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

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

    dispatch(anotherAction(items));
  }
}

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

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

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

我同意@Bloomca。将 store 所需的值作为参数传递给 dispatch 函数似乎比导出 store 更简单。我在这里做了一个例子：

import React from "react";
import {connect} from "react-redux";
import * as actions from '../actions';

class App extends React.Component {

  handleClick(){
    const data = this.props.someStateObject.data;
    this.props.someDispatchFunction(data);
  }

  render(){
    return (
      <div>       
      <div onClick={ this.handleClick.bind(this)}>Click Me!</div>      
      </div>
    );
  }
}


const mapStateToProps = (state) => {
  return { someStateObject: state.someStateObject };
};

const mapDispatchToProps = (dispatch) => {
  return {
    someDispatchFunction:(data) => { dispatch(actions.someDispatchFunction(data))},

  };
}


export default connect(mapStateToProps, mapDispatchToProps)(App);