React中状态变更后如何立即获取最新Redux状态？

首先得明确为什么会出现这个问题：Redux的状态更新是同步的，但React组件的props更新要等到下一次渲染周期才会生效。你在componentWillMount里调用setMyState后立刻打印this.props.myState，此时组件还没完成重新渲染，拿到的自然是更新前的旧值。

下面给你几个符合React/Redux最佳实践的解决方案：

方案1：利用生命周期监听props变化（类组件） #

这是最常规的做法，通过componentDidUpdate钩子监听myState的变化，当它更新时触发后续Action。同时注意componentWillMount已经被React废弃，建议换成componentDidMount：

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

class MyScreen extends React.Component {
  componentDidMount() {
    // 在组件挂载后触发第一个Action
    this.props.setMyState('value');
  }

  componentDidUpdate(prevProps) {
    // 对比前后props，当myState变化时触发后续Action
    if (prevProps.myState !== this.props.myState) {
      this.props.setAnotherAction(this.props.myState);
    }
  }

  render() {
    // 渲染逻辑
    return <div>{this.props.myState}</div>;
  }
}

const mapStateToProps = state => {
  const { myState } = state;
  return { myState }; // 这里建议返回对象，避免解构后丢失其他props
};

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

方案2：使用Redux Thunk合并Action逻辑（推荐） #

如果你项目中已经使用了redux-thunk中间件，可以把两个Action的逻辑封装成一个Thunk Action，这样能直接在状态更新后拿到最新值，无需依赖组件生命周期：

首先确保你的Redux store配置了thunk中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

然后编写Thunk Action：

// actions.js
export const setMyStateAndTriggerNext = (value) => {
  return (dispatch, getState) => {
    // 触发第一个Action更新状态
    dispatch(setMyState(value));
    // 直接从store获取最新状态
    const { myState } = getState();
    // 触发第二个Action
    dispatch(setAnotherAction(myState));
  };
};

之后在组件中调用这个合并后的Action即可：

componentDidMount() {
  this.props.setMyStateAndTriggerNext('value');
}

方案3：用Redux Saga解耦Action触发逻辑 #

如果你的项目使用了redux-saga，可以监听第一个Action的触发，自动执行后续逻辑，完全和组件解耦：

// sagas.js
import { takeLatest, put } from 'redux-saga/effects';
import { SET_STATE } from '../actionTypes';
import { setAnotherAction } from '../actions';

function* handleSetState(action) {
  // 拿到第一个Action的payload，直接触发第二个Action
  yield put(setAnotherAction(action.payload));
}

export default function* rootSaga() {
  // 监听SET_STATE类型的Action，每次触发时执行handleSetState
  yield takeLatest(SET_STATE, handleSetState);
}

避坑提醒 #

• 绝对不要在Reducer里触发Action：Reducer必须是纯函数，不能包含任何副作用（比如dispatch Action、异步操作等），这是Redux的核心原则，违反会导致状态不可预测。
• 不要用“状态标记”的繁琐方式：生命周期或中间件的方案已经足够清晰，额外的标记只会增加代码复杂度。

内容的提问来源于stack exchange，提问作者tassock