新闻流与时间线页面状态留存：是否可为各页面单独设置Redux Reducer？

其实从状态管理的角度来说，给Newsfeed和Timeline各配一个独立的Reducer，刚好能完美解决你「切换标签页保留各自状态」的需求，原因很简单：

• 状态完全隔离：两个屏幕的帖子列表、滚动位置、加载状态（比如是否在加载更多、有没有加载失败）这些数据，都会各自存在对应的Reducer里，互相不会干扰。用户切走再切回来时，直接读取该Reducer里保存的状态就能恢复之前的界面状态，不用重新加载或者重置。
• 逻辑职责清晰：每个Reducer只负责处理对应屏幕的状态更新逻辑，比如newsfeedReducer只处理新闻流的获取、滚动、刷新等action，timelineReducer只处理时间线的相关操作，后续维护起来也更省心。

具体实现起来也很 straightforward：

1. 分别编写两个独立的Reducer文件，比如newsfeedReducer.js和timelineReducer.js，各自定义初始状态和对应的action处理逻辑。举个简单的例子：

   // newsfeedReducer.js
   const initialState = {
     posts: [],
     scrollPosition: 0,
     isLoading: false
   };
   
   export default function newsfeedReducer(state = initialState, action) {
     switch(action.type) {
       case 'FETCH_NEWSFEED_SUCCESS':
         return { ...state, posts: action.payload };
       case 'SAVE_NEWSFEED_SCROLL_POS':
         return { ...state, scrollPosition: action.payload };
       // 其他相关action处理
       default:
         return state;
     }
   }
   

   时间线的Reducer结构类似，只是处理的action类型和状态字段对应自己的业务。

2. 在根Reducer里用combineReducers把这两个Reducer合并起来：

   import { combineReducers } from 'redux';
   import newsfeedReducer from './newsfeedReducer';
   import timelineReducer from './timelineReducer';
   
   const rootReducer = combineReducers({
     newsfeed: newsfeedReducer,
     timeline: timelineReducer
   });
   
   export default rootReducer;
   

3. 最后在两个屏幕的组件里，连接Redux时只订阅各自对应的状态分支：比如NewsfeedScreen取state.newsfeed，TimelineScreen取state.timeline，这样组件就能拿到自己专属的状态了。

另外提个小建议：如果两个屏幕有一些重复的逻辑（比如加载帖子的通用逻辑），可以把这部分抽成一个工具函数或者自定义hook，避免代码重复，但状态还是保持各自独立存储，这样兼顾了复用性和状态隔离的需求。

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