状态更改后立即在 React 中获取最新的 Redux 状态

Question

我有一个简单的 redux action 和 reducer，可以在不发出任何类型的 Web 服务请求的情况下更改状态：

// Action
export const setMyState = (value) => {
  return {
    type: 'SET_STATE',
    payload: value
  };
};

// Reducer
export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'SET_STATE':
      return { myState: action.payload }
  }
}

当我通过 react 组件中的 action 设置状态并立即从 redux prop 绑定调用该状态时，我没有获得当前状态：

import React from 'react';
import { connect } from 'react-redux';
import { setMyState } from '../actions';

class MyScreen extends React.Component {

  componentWillMount() {
    this.props.setMyState('value');
    console.log(this.props.myState);
  }
}

const mapStateToProps = state => {
  const { myState } = state;
  return myState;
};

export default connect(mapStateToProps, { setMyState })(MyScreen);

我知道当 redux 状态和绑定的 props 发生变化时，将再次调用 render，但我想做的是根据结果状态触发另一个 Redux 操作。 我的选择似乎是：

1. 弄清楚如何在状态改变后立即在 React 中更新 Redux 状态

2. 相反，在减速器中触发一个 redux 动作，这听起来像是一个反模式。

3. 在我的组件或 redux 中设置某种状态，以便在下一次渲染时触发该操作，这看起来很笨拙。

Answer 1

像这样配置你的减速器：

switch (action.type) {
  case 'SET_STATE':
    return {
      ...state,
      loading: true,
    };

  case 'SET_STATE_SUCCESS':
    return {
      ...state,
      loading: false,
      payload: value
    };
}

然后在你的组件中听

this.props.myState.loading

然后触发你的动作 if (loading) 等等！

Answer 2

你用这个 Redux 状态做什么？

如果您尝试访问刚刚设置为 Redux 状态的数据，或者如果数据已经处于 Redux 状态，您可以同时调度这两个调用。

如果您需要进行调用，因为在将数据设置为 Redux 状态时对数据做了一些工作（我建议在操作中而不是在减速器中执行此工作），那么componentWillReceiveProps(nextProps)将执行您需要的操作。 您可以将当前的 props 与下一个 props 进行比较，并触发对 Redux 状态的另一次更新。

最好的方法可能是使用Redux 中间件。

Answer 3

我的解决方案是使用事件循环处理更新，而不是调用堆栈。 特别是对于您的情况，您的实现将包括 setTimeout(() => {}); 如下：

import React from 'react';
import { connect } from 'react-redux';
import { setMyState } from '../actions';

class MyScreen extends React.Component {

  componentWillMount() {
    setTimeout(() => { this.props.setMyState('value'); },0);
    setTimeout(() => { console.log(this.props.myState); },0);
  }
}

const mapStateToProps = state => {
  const { myState } = state;
  return myState;
};

export default connect(mapStateToProps, { setMyState })(MyScreen);