如何正确使用combineReducers合并两个Reducer？状态获取问题咨询

看起来你碰到了Redux combineReducers 里常见的状态隔离问题——每个reducer只能访问自己负责的状态切片，没法直接拿到其他reducer的更新后状态。我来帮你拆解问题并给出几个可行的解决方案：

问题根源 #

combineReducers 的核心设计是状态切片隔离：每个reducer只会接收到自己对应的那部分state作为参数，而不是完整的全局state。所以你的loadMore reducer只能处理它自己的状态，无法直接读取weather reducer管理的weather数组或其他状态。

解决方案 #

1. 在Action Creator中获取全局状态，传递必要数据 #

如果loadMore的逻辑依赖weather的当前状态，可以在触发action前，通过Redux的getState()方法获取全局状态，把需要的数据作为payload传入action，让loadMore reducer从action中拿到所需信息。

示例Action Creator：

import * as types from '../constants/ActionsTypes';

// 使用thunk中间件支持异步逻辑（如果需要）
export const updateLoadMore = () => (dispatch, getState) => {
  // 获取全局状态中的weather切片
  const { weather } = getState();
  // 提取需要的数据，比如当前weather数组的长度
  const currentWeatherLength = weather.weather.length;
  
  // 触发action，把数据传递给reducer
  dispatch({
    type: types.UPDATE_LOAD_MORE,
    payload: { currentWeatherLength }
  });
};

对应的loadMore reducer：

import * as types from '../constants/ActionsTypes';

let initialState = 5;

const loadMore = (state = initialState, action) => {
  switch (action.type) {
    case types.UPDATE_LOAD_MORE:
      // 从action.payload中拿到weather的当前状态数据
      return action.payload.currentWeatherLength + 5;
    default:
      return state;
  }
};

export default loadMore;

2. 合并关联的Reducers #

如果loadMore和weather的状态逻辑高度耦合，说明它们可能属于同一个状态域，直接合并成一个reducer是更简单的选择。这样你就能在同一个reducer里直接访问所有相关状态。

合并后的示例Reducer：

import * as types from '../constants/ActionsTypes';

let initialState = {
  city: '',
  weather: [],
  loadMore: 5
};

const weatherReducer = (state = initialState, action) => {
  switch (action.type) {
    case types.ADD_WEATHER:
      const updatedWeather = [...state.weather, ...action.payload.weather];
      return {
        ...state,
        weather: updatedWeather,
        // 直接基于更新后的weather数组更新loadMore
        loadMore: updatedWeather.length + 5
      };
    // 其他case...
    default:
      return state;
  }
};

export default weatherReducer;

3. 使用Selector计算派生状态 #

如果loadMore的值只是基于weather状态的派生计算值，没必要把它存在state里。可以用Selector实时计算最新值，确保永远拿到的是最新状态（推荐配合reselect库优化性能）。

示例Selector（无需额外库）：

// 在单独的selectors文件中定义
export const selectLoadMore = (state) => {
  // 基于weather切片的当前状态计算loadMore
  return state.weather.weather.length + 5;
};

在组件中使用：

import { useSelector } from 'react-redux';
import { selectLoadMore } from './selectors';

const WeatherComponent = () => {
  // 实时获取最新的loadMore计算值
  const loadMore = useSelector(selectLoadMore);
  
  return <div>Load More Count: {loadMore}</div>;
};

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