登录后如何保存redux商店？

Question

基本设置:

1)应用程序是React和Redux,

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

3)用户需要进行身份验证.我正在使用redux-oidc库,它只是客户端,它工作正常.

4)用户登录后,我对下一步该做什么感到朦胧.

问题(S):

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

2)用户登录后我无法显示任何内容(如用户特定的导航栏,时间轴,邮箱),我必须让商店饱和并让其做出反应.我应该采取什么方法？

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

任何意见,将不胜感激.

Answer 1

在创建商店后对状态进行保湿,可以通过创建可绕过顶级减速器的主减速器来实现,并替换整个状态.

Reducers是获取当前状态的函数,将其与动作的有效负载相结合,并返回一个新状态.通常主减速器是所有顶部减速器的组合使用combineReducers,状态是顶级减速器返回的状态件的组合.

但是,主减速器可以直接对动作做出反应.如果主reducer接收到某个action(hydrate),而不是调用组合的reducer,则返回action的有效负载(保存状态).其他操作将传递给组合的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>