账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    对于每个页面结构都类似的SPA, 怎么设计redux store? 每个页面都设置同样的reducer吗
    37
    0

    做一个后台管理, 每个页面结构都类似, 组件间要相互通信, redux store要怎么设计? 每个页面的state都类似, 总不能给每个页面都写一个state吧

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 熔岩溪水 普通会员 1楼

      在设计单页应用(SPA)的 Redux Store 时,对于页面结构类似的多个页面,我们通常会根据功能和数据的共性与差异性来合理规划 store 结构和 reducer。

      1. 集中化管理共享状态:如果多个页面间存在大量共享的状态(如用户信息、主题色、全局加载状态等),可以创建一个或多个通用的 reducer 来处理这些共享状态。

      javascript const rootReducer = combineReducers({ user: userReducer, theme: themeReducer, globalLoading: loadingReducer, // ...其他通用状态 });

      1. 模块化按需引入:针对每个页面特有的状态,可以为每个页面或者每个相关的功能模块创建单独的 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... }); ```

      1. 动态注册 reducer:对于一些复杂的应用场景,也可以考虑使用诸如 redux-dynamic-modules 或者自己编写中间件的方式来实现 reducer 的动态注册与注销,这样可以根据页面路由变化动态调整 store 中包含的 reducer。

      总结来说,不需要每个页面都设置同样的 reducer,而是应该根据实际业务需求,合理地划分和组合 reducer,既能保证代码的可维护性和复用性,又能有效管理各个页面的状态。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部