如何从连接到同一Store分区的组件中分发Redux Action？

嘿，刚接触Redux踩坑太正常啦，别担心！虽然你提到的问题内容有点截断，但我可以先给你梳理下触发更新Action时最容易踩的几个常见坑，你可以对照着排查：

• 忘记通过dispatch触发Action
  很多新手会直接调用Action创建函数，但Redux必须通过dispatch才能触发状态更新。你需要把Action创建函数通过mapDispatchToProps映射到组件props中：

  // 假设你的Action创建函数是updateUserAction
  const mapDispatchToProps = dispatch => {
    return {
      updateUser: (userData) => dispatch(updateUserAction(userData))
    }
  }
  // 连接组件时要加上mapDispatchToProps参数
  const UserWithStore = connect(mapStateToProps, mapDispatchToProps)(UserComponent);
  

  之后在组件内就可以通过this.props.updateUser(你的用户数据)来触发状态更新了。

• Reducer未处理对应的Action类型
  检查你的user reducer，是否针对触发的Action类型做了正确的状态更新。比如你的Action类型是UPDATE_USER，reducer需要这样写：

  const initialState = { /* 初始状态 */ };
  const userReducer = (state = initialState, action) => {
    switch(action.type) {
      case 'UPDATE_USER':
        // 必须返回新的状态对象，不能直接修改原state！
        return { ...state, ...action.payload };
      // 其他Action类型的处理...
      default:
        return state;
    }
  }
  

  划重点：Redux要求reducer是纯函数，直接修改原state不会触发组件重新渲染，一定要返回新的状态对象。

• Action创建函数返回格式错误
  确认你的Action创建函数返回的是包含type字段的对象，比如：

  const updateUserAction = (userData) => {
    return {
      type: 'UPDATE_USER', // 必须有type字段，否则reducer无法识别
      payload: userData // 携带要更新的数据
    }
  }
  

  如果是异步Action（比如调用后端接口），还需要配置redux-thunk这类中间件，否则Redux无法处理返回函数的Action创建函数。

• Store分区映射不匹配
  检查rootReducer中是否把user reducer正确挂载到了user键上，要和mapStateToProps里的state['user']对应：

  import { combineReducers } from 'redux';
  import userReducer from './userReducer';
  
  const rootReducer = combineReducers({
    user: userReducer // 这里的键名必须和mapStateToProps中的state['user']一致
  });
  

如果上面这些排查点都没问题，可以把你触发Action的具体代码、对应的reducer代码补充出来，我再帮你精准定位问题~

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