Redux多Reducer场景下React/Redux食谱应用状态切换问题咨询

嘿，我完全懂你现在的困扰——在信息流（所有用户前10条+分页加载）和用户专属食谱页面之间切换时，Redux状态的复用与切换确实容易踩坑。下面给你几个实用的解决方案，你可以根据项目复杂度选择最合适的：

把全局信息流和用户专属食谱分成两个独立的状态节点，彻底隔离两个场景的状态，从根源上避免冲突。

示例Reducer代码 #

// recipesReducer.js
const initialState = {
  feed: {
    items: [],
    hasMore: true,
    currentPage: 1
  },
  user: {
    items: [],
    currentUserId: null
  }
};

export default function recipesReducer(state = initialState, action) {
  switch (action.type) {
    // 处理信息流初始加载
    case 'GET_FEED_RECIPES_SUCCESS':
      return {
        ...state,
        feed: {
          ...state.feed,
          items: action.payload,
          currentPage: 1,
          hasMore: action.payload.length === 10
        }
      };
    // 处理信息流加载更多
    case 'LOAD_MORE_FEED_SUCCESS':
      return {
        ...state,
        feed: {
          ...state.feed,
          items: [...state.feed.items, ...action.payload],
          currentPage: state.feed.currentPage + 1,
          hasMore: action.payload.length === 10
        }
      };
    // 处理用户食谱加载
    case 'GET_USER_RECIPES_SUCCESS':
      return {
        ...state,
        user: {
          items: action.payload.recipes,
          currentUserId: action.payload.userId
        }
      };
    default:
      return state;
  }
}

组件中使用 #

信息流页面只关注feed状态：

// FeedPage.js
import { useSelector, useDispatch } from 'react-redux';
import { getFeedRecipes, loadMoreFeedRecipes } from '../actions/recipeActions';

function FeedPage() {
  const { items, hasMore, currentPage } = useSelector(state => state.recipes.feed);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getFeedRecipes());
  }, [dispatch]);

  const handleLoadMore = () => {
    if (hasMore) dispatch(loadMoreFeedRecipes(currentPage + 1));
  };

  return (
    <div>
      {items.map(recipe => <RecipeCard key={recipe.id} recipe={recipe} />)}
      {hasMore && <button onClick={handleLoadMore}>加载更多</button>}
    </div>
  );
}

用户页面只关注user状态：

// UserRecipesPage.js
import { useSelector, useDispatch } from 'react-redux';
import { getUserRecipes } from '../actions/recipeActions';
import { useParams } from 'react-router-dom';

function UserRecipesPage() {
  const { userId } = useParams();
  const { items, currentUserId } = useSelector(state => state.recipes.user);
  const dispatch = useDispatch();

  useEffect(() => {
    // 只有当用户ID变化时才重新请求，避免重复调用
    if (currentUserId !== userId) {
      dispatch(getUserRecipes(userId));
    }
  }, [dispatch, userId, currentUserId]);

  return (
    <div>
      <h2>用户{userId}的所有食谱</h2>
      {items.map(recipe => <RecipeCard key={recipe.id} recipe={recipe} />)}
    </div>
  );
}

这个方案的优点是状态边界清晰，两个页面的逻辑完全独立，切换时不需要清理状态，后期维护成本极低。

如果不想拆分状态，可以通过监听路由变化，在页面切换时主动重置状态并加载对应数据。

示例路由监听代码 #

在全局布局或App组件中添加路由监听：

// App.js
import { useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { getFeedRecipes, getUserRecipes, resetRecipes } from '../actions/recipeActions';

function App() {
  const location = useLocation();
  const { userId } = useParams();
  const dispatch = useDispatch();

  useEffect(() => {
    // 每次路由变化先重置状态
    dispatch(resetRecipes());
    
    if (location.pathname.startsWith('/user/')) {
      // 进入用户页面，加载该用户所有食谱
      dispatch(getUserRecipes(userId));
    } else {
      // 回到信息流页面，加载前10条
      dispatch(getFeedRecipes());
    }
  }, [location.pathname, userId, dispatch]);

  return (
    {/* 路由组件 */}
  );
}

Reducer中添加重置逻辑：

case 'RESET_RECIPES':
  return initialState; // 回到初始状态

这个方案适合小型项目，状态结构简单，但要注意避免不必要的重复请求（比如用户在同一个用户页面刷新时，不需要重复调用接口）。

在状态中添加一个currentView字段，标记当前是“信息流”还是“用户页面”，Reducer根据这个字段决定是否处理对应action。

示例Reducer代码 #

const initialState = {
  items: [],
  hasMore: true,
  currentPage: 1,
  currentView: 'feed', // 可选值：'feed' | 'user'
  currentUserId: null
};

case 'SET_CURRENT_VIEW':
  return {
    ...state,
    currentView: action.payload.view,
    currentUserId: action.payload.userId || null,
    items: [],
    hasMore: true,
    currentPage: 1
  };

// 只有当前是信息流视图时，才处理加载更多
case 'LOAD_MORE_FEED_SUCCESS':
  if (state.currentView !== 'feed') return state;
  return {
    ...state,
    items: [...state.items, ...action.payload],
    currentPage: state.currentPage + 1,
    hasMore: action.payload.length === 10
  };

// 只有当前是对应用户视图时，才更新用户食谱
case 'GET_USER_RECIPES_SUCCESS':
  if (state.currentView !== 'user' || state.currentUserId !== action.payload.userId) {
    return state;
  }
  return {
    ...state,
    items: action.payload.recipes,
    hasMore: false // 用户页面不需要分页
  };

切换页面时先设置视图类型：

// 进入用户页面
dispatch(setCurrentView({ view: 'user', userId: userId }));
dispatch(getUserRecipes(userId));

// 回到信息流页面
dispatch(setCurrentView({ view: 'feed' }));
dispatch(getFeedRecipes());

这个方案适合不想拆分状态，但需要严格区分场景的情况，不过状态逻辑会稍复杂一些。

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