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

Question

我有一个简单的 redux 操作和 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 组件中的操作设置状态并立即从 redux prop 绑定(bind)调用该状态时，我没有得到当前状态:

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 状态和绑定(bind)的 props 发生变化时将再次调用 render，但我想做的是根据结果状态触发另一个 Redux 操作。我的选择似乎是:

1. 弄清楚如何在状态更改后立即在 React 中获取最新的 Redux 状态

2. 改为在 reducer 中触发一个 redux Action ，这听起来像 an anti-pattern .

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

Answer 1

像这样配置你的reducer:

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

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

然后在你的组件中听

this.props.myState.loading

然后触发你的 Action if(loading)等等!