在 Redux Toolkit 中使用 createSlice 动态加载 initialState

IT技术 reactjs redux react-redux redux-toolkit
2021-05-15 14:31:59

是否有一种众所周知的模式可以将动态初始状态的负载注入 Redux-Toolkit 的 initialState 对象？

也就是说，我想这样做 - 

import initialState from './initialState';

function generateSlice(payload = {}){
  const postsSlice = createSlice({
    name: 'posts',
    initialState: {...initialState, ...payload}, /// inject data here
    reducers: {...}
  })
}

例如，{availableRooms: []}是一个空数组，除非在 init 上注入数据{availableRooms: [{...}]}

这种模式不起作用，但是，b/c 我想导出可调度的操作，就像这样-

 const postsSlice = createSlice({
    name: 'posts',
    initialState: {...initialState, ...payload},
    reducers: {...}
  })

export {actionName} from postsSlice.actions;

*****
import {actionName} from '../mySlice'

...
const dispatch = useDispatch();
dispatch(actionName('exampleVal'));
...

我受到airbnblinting 规则的约束，所以我不能导出 -

let actions; ///Bad
function generateSlice(payload){
  const postsSlice = createSlice({
    name: 'posts',
    initialState: {...initialState, ...payload},
    reducers: {...}
  })
  actions = postsSlict.actions
}

export actions;

我所追求的功能在不使用createSlice. 我的问题的原因是我在多个地方看到了createSlice推荐 over createAction+ createReducer，但我没有看到任何简单的方法来介绍我正在寻找的动态数据。

我什么都不知道，redux-orm但我认为我所追求的功能类似于这个 SO 问题

1个回答

这是我目前的解决方法，createSlice完全跳过。

在根渲染中

...
const store = initStore(data);
 <Provider store={store}>
  <App />
</Provider>

和 init 函数（为简洁起见已缩减）

import {
  configureStore,
  getDefaultMiddleware,
  combineReducers,
} from '@reduxjs/toolkit';
import reservationReducer from '@reservation/reducer';
import spaceHierarchyReducer from '@map/reducer';
import appStoreReducer from '@app/reducer';

let ReduxStore;

function initStore(
  ssrState: Partial<RootStore> = {},
) {
  if (ReduxStore) {
    return ReduxStore;
  }
  const slices = {
    reservation: reservationReducer,
    spaceHierarchy: spaceHierarchyReducer,
    appStore: appStoreReducer,
  };
  const reducer = combineReducers(slices);
  const preloadedState = getInitialState(ssrState);
  const store = configureStore({
    reducer,
    middleware,
    preloadedState,
  });

  ReduxStore = store;
  initDispatch(store);
  return store;
}

在 中getInitialState，我解析 URL 并根据业务需求设置商店，混合了服务器端数据 + url-injectable 参数。然后，在 中initDispatch，我调用store.dispatch()一些基于注入初始状态的 init 逻辑。

在这里，Typescript 的使用非常有用，因为它强制执行从返回的数据getInitialState的形状以及减速器的形状。

其它你可能感兴趣的问题
上一篇在单页应用程序中创建临时 URL 下一篇JSS 中的 MUI 全局类名称有多可靠？