如何在Rekit的不同功能模块间共享状态？

Hey there! Awesome to hear Rekit's making your React/Redux learning journey smoother—totally get why you're digging it. Let's break down how to share state like user info across different modules without relying on localStorage (which does go against Redux's core principle).

Here are the go-to approaches that fit Rekit's structure while keeping your state management clean:

• Elevate shared state to a global "core" module
  Rekit's modular structure doesn't mean you can't have global state. Create a dedicated module (like features/core or features/shared) to hold state that needs to be accessed across multiple modules—think user auth data, global app settings, or common UI state.

  • Set up actions, reducers, and selectors in this core module just like you would for any other feature.
  • In any component from other modules, use connect to pull in the core state via mapStateToProps, e.g.:

    const mapStateToProps = (state) => ({
      currentUser: state.core.user,
    });
    

  This keeps all state operations centralized in Redux, sticking to the single source of truth.

• Use Redux persist for state persistence (instead of raw localStorage)
  If you need to keep user data across page reloads, don't write directly to localStorage. Instead, use a middleware like redux-persist to automatically persist parts of your Redux store to localStorage (or other storage options).

  • This way, all state updates still flow through Redux actions and reducers—you're just adding persistence as a layer on top. Your components never interact directly with localStorage, so you maintain the single source of truth.
  • Rekit plays nicely with custom middleware, so you can easily set this up in your store configuration.

• Encapsulate state access with selectors
  To make your shared state usage more maintainable, create reusable selectors in your core module. For example:

  // features/core/selectors.js
  export const selectCurrentUser = (state) => state.core.user;
  

  Then, any component that needs the user data can import this selector instead of directly accessing state.core.user. If you ever need to change the structure of your core state, you only have to update the selector—no need to tweak every component that uses the data.

• Leverage combining reducers correctly
  Rekit automatically combines reducers for each module, but you can adjust the root reducer to include your core/shared reducers at the top level. This ensures every module's reducer has access to the global core state if needed (though it's better to use selectors in components rather than cross-referencing reducers directly).

The key takeaway here is that Rekit's modular design complements Redux's global store—you don't have to choose between them. By centralizing shared state in a dedicated module and using Redux's built-in tools, you can keep your state management consistent and true to the single source of truth principle.

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