5

動的な初期状態のペイロードを Redux-Toolkit の initialState オブジェクトに注入するためのよく知られたパターンはありますか?

つまり、私はこれをしたい -

import initialState from './initialState';

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

たとえば、{availableRooms: []}初期化時にデータが挿入されない限り、空の配列です{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'));
...

linting ルールに制約されているairbnbため、let でエクスポートできません -

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

export actions;

私が求めている機能は、を使用しない方が少し簡単ですcreateSlice。私の質問の理由は、+よりcreateSliceも推奨されている複数の場所を見てきましたが、探している動的データを導入する簡単な方法が見当たらないからです。createActioncreateReducer

私は何も知りませんredux-ormが、私が求めている機能はこのSOの質問に似ていると思います

4

1 に答える 1