reactjs - 登录后如何水合redux store？

Question

基本设置:

1) 应用程序是 React 和 Redux，

2) 应用程序由前端 NGINX 提供服务，提供静态文件，例如 html、图片，当然还有应用程序本身。它还将所有相关请求(Web 套接字和/或 AJAX)转发到后端(phoenix/elixir)。

3) 用户需要进行身份验证。我正在使用 redux-oidc 库，它仅是客户端，并且工作正常。

4)用户登录后，我不知道下一步该做什么。

问题:

1)我无法将状态与第一个请求一起发送，因为我不知道用户是谁，因此不知道要发送哪个状态。同时应用程序已启动(创建空存储，显示登录组件)，

2)用户登录后，我无法显示任何内容(例如用户特定的导航栏、时间轴、邮箱)，我必须使商店饱和并让 React 完成其工作。我应该采取什么方法？

3) 服务器渲染已退出，因为 a) 我没有使用 Node，并且使用所选框架渲染 React 组件充其量是困惑和复杂的，b) 我无法将应用程序导出到 NGinx，因为它只提供服务静态 Assets ，并且那里没有运行服务器逻辑。理论上，我可以摆脱 NGinx，在 API 服务器上进行基于服务器的登录，并发送 HTML 和 JSON 状态，这些状态可用于在客户端上呈现应用程序。然而，NGinx 不仅提供静态 Assets ，还对少数实例进行负载平衡，因此，摆脱它不是我想做的事情。

如有任何建议，我们将不胜感激。

Answer 1

创建存储后对状态进行水合可以通过创建一个主 reducer 来实现，该主 reducer 可以绕过顶级 reducer 并替换整个状态。

Reducer 是获取当前状态、将其与操作的有效负载组合并返回新状态的函数。通常主 reducer 是使用combineReducers的所有顶级 reducer 的组合，状态是顶级 reducer 返回的状态片的组合。

但是，主 reducer 可以直接对操作使用react。如果主 reducer 接收到某个操作 (Hydrate)，它不会调用组合的 reducer ，而是返回该操作的有效负载(已保存的状态)。其他操作将传递给组合的 reducer 。

const mainReducer = (state = {}, action) => 
    action.type === 'hydrate' ? 
        action.payload // hydrate the state
        : 
        reducers(state, action); // create new state by using combined reducers

<小时/>

工作示例:

const { combineReducers, createStore } = Redux;

const people = (state = [], action) => action.type === 'people' ? [...state, action.payload] : state;

const items = (state = [], action) => action.type === 'items' ? [...state, action.payload] : state;

const reducers = combineReducers({
  people,
  items
});

const mainReducer = (state = {}, action) => action.type === 'hydrate' ? action.payload : reducers(state, action);

const store = createStore(mainReducer);

store.subscribe(() => console.log(store.getState()));

store.dispatch({ type: 'people', payload: 5 });
store.dispatch({ type: 'items', payload: 'green' });
store.dispatch({ type: 'hydrate', payload: { 
  people: [20, 30, 50, 100],
  items: ['green', 'yellow', 'red']
}});

<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.6.0/redux.min.js"></script>