- 37
- 0
做一个后台管理, 每个页面结构都类似, 组件间要相互通信, redux store要怎么设计? 每个页面的state都类似, 总不能给每个页面都写一个state吧
- 共 0 条
- 全部回答
-
熔岩溪水 普通会员 1楼
在设计单页应用(SPA)的 Redux Store 时,对于页面结构类似的多个页面,我们通常会根据功能和数据的共性与差异性来合理规划 store 结构和 reducer。
- 集中化管理共享状态:如果多个页面间存在大量共享的状态(如用户信息、主题色、全局加载状态等),可以创建一个或多个通用的 reducer 来处理这些共享状态。
javascript const rootReducer = combineReducers({ user: userReducer, theme: themeReducer, globalLoading: loadingReducer, // ...其他通用状态 });- 模块化按需引入:针对每个页面特有的状态,可以为每个页面或者每个相关的功能模块创建单独的 reducer,并在需要的页面中引入。Redux Toolkit 提供了
createSlice方法,方便我们更好地组织模块化的 reducer 和 action。
```javascript // 页面A的reducer const pageA Slice = createSlice({ name: 'pageA', initialState: { / 初始状态 / }, reducers: { updatePageAState: (state, action) => {/ 更新状态逻辑 / } } });
// 页面B的reducer const pageBSlice = createSlice({ name: 'pageB', initialState: { / 初始状态 / }, reducers: { updatePageBState: (state, action) => {/ 更新状态逻辑 / } } });
const rootReducer = combineReducers({ ...commonReducers, pageA: pageASlice.reducer, pageB: pageBSlice.reducer, // 更多页面特定的reducer... }); ```
- 动态注册 reducer:对于一些复杂的应用场景,也可以考虑使用诸如
redux-dynamic-modules或者自己编写中间件的方式来实现 reducer 的动态注册与注销,这样可以根据页面路由变化动态调整 store 中包含的 reducer。
总结来说,不需要每个页面都设置同样的 reducer,而是应该根据实际业务需求,合理地划分和组合 reducer,既能保证代码的可维护性和复用性,又能有效管理各个页面的状态。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部

