如何在Redux Action中更新React组件State值？

嘿，我来帮你理清这个问题～首先得搞明白为什么你用this.setState会报错：Redux的Action函数和你的组件实例是完全分离的，这里的this根本不是你的组件对象，自然找不到setState方法。而且从Redux的设计逻辑来说，Action的职责是触发Redux Store的状态变更，而非直接操作组件的本地State。下面给你几个靠谱的解决方案，你可以根据自己的场景选择：

方案1：把status迁移到Redux Store中（推荐） #

既然已经在用Redux了，如果这个status和全局业务逻辑相关、需要被其他组件共享，最好把它放到Redux Store里统一管理。步骤如下：

1. 定义对应的Reducer

// 示例：statusReducer.js
const initialState = {
  status: false
};

export default function statusReducer(state = initialState, action) {
  switch (action.type) {
    case 'UPDATE_STATUS':
      return { ...state, status: action.payload };
    default:
      return state;
  }
}

2. 修改Action，dispatch更新Store的动作

export const actionMethod = () => { 
  return dispatch => { 
    return fetch(/* 你的请求地址 */) 
      .then(response => response.json()) 
      .then(responseJson => { 
        // 这里dispatch一个action来更新Redux Store
        dispatch({ type: 'UPDATE_STATUS', payload: true });
        // 其他业务逻辑处理...
      })
  }
}

3. 组件中通过connect订阅Store状态

import { connect } from 'react-redux';
import { actionMethod } from './yourActionFile';

class YourComponent extends React.Component {
  constructor(props) { 
    super(props); 
    // 不再需要在组件本地存status，直接从props获取
  }

  componentDidMount() {
    this.props.actionMethod();
  }

  render() {
    const { status } = this.props;
    return <div>{status ? '请求完成' : '请求中'}</div>;
  }
}

// 把Store中的status映射到组件props
const mapStateToProps = state => ({
  status: state.statusReducer.status // 对应你combineReducers时的key
});

// 把action映射到组件props
const mapDispatchToProps = {
  actionMethod
};

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

方案2：将异步逻辑移到组件中，更新本地State #

如果status只是组件的纯本地状态（不需要和其他组件共享、也不属于全局业务数据），那完全没必要放到Redux里。你可以把fetch逻辑移到组件的方法中，这样就能正常使用this.setState了：

class YourComponent extends React.Component {
  constructor(props) { 
    super(props); 
    this.state = { status: false }; 
  }

  fetchData = () => {
    fetch(/* 你的请求地址 */) 
      .then(response => response.json()) 
      .then(responseJson => { 
        // 这里直接用this.setState更新组件状态
        this.setState({ status: true });
        // 如果需要更新Redux Store的其他状态，依然可以调用映射后的action
      })
  }

  componentDidMount() {
    this.fetchData();
  }

  render() {
    return <div>{this.state.status ? '请求完成' : '请求中'}</div>;
  }
}

方案3：让Action返回Promise，组件调用时处理状态更新 #

如果你坚持要把fetch逻辑留在Action里，那可以让Action返回Promise，然后在组件中调用Action后，通过Promise的then方法来更新本地State：

1. 修改Action，确保返回Promise

export const actionMethod = () => { 
  return dispatch => { 
    // 返回fetch的Promise，让组件可以后续处理
    return fetch(/* 你的请求地址 */) 
      .then(response => response.json()) 
      .then(responseJson => { 
        // 这里可以先更新Redux Store（如果需要）
        // dispatch(...)
        return responseJson; // 把请求结果返回给组件
      })
  }
}

2. 组件中调用Action并更新本地State

import { connect } from 'react-redux';
import { actionMethod } from './yourActionFile';

class YourComponent extends React.Component {
  constructor(props) { 
    super(props); 
    this.state = { status: false }; 
  }

  componentDidMount() {
    this.props.actionMethod()
      .then(() => {
        // 请求完成后更新组件本地状态
        this.setState({ status: true });
      });
  }

  render() {
    return <div>{this.state.status ? '请求完成' : '请求中'}</div>;
  }
}

const mapDispatchToProps = {
  actionMethod
};

export default connect(null, mapDispatchToProps)(YourComponent);

总结 #

总的来说，优先推荐方案1，因为它符合Redux单一数据源的设计理念，能让状态管理更清晰。如果是纯粹的组件本地状态，方案2更轻便。方案3则是折中方案，适合需要复用Action逻辑但又要更新本地状态的场景。

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