Reactjs 组合redux工具包切片和还原程序的惯用方法

Techstack：React、redux、redux工具包（通过扩展Immer）

用例-我正在尝试合并切片。这些片用于接口由第三方库定义的独立状态块

我正在尝试做一些非传统的事情。我已经很久没有在React或redux中做任何严肃的工作了，所以我可能错过了一些有用的库。我做了初步扫描，没有发现任何适合我口味的东西。然而，建议总是受欢迎的

而且，这是我第一次认真尝试使用typescript。所以，虽然我已经完成了家庭作业，但我的大脑还没有被所有的打字习惯用语和好吃的东西连接起来

我不想放弃我在这个用例中使用的任何技术

这个用例将不断重复。我相信社会上其他人也遇到过类似的问题

由于typescript或多或少是ES6之上的语法糖，因此存在许多明显的限制，使得此类用例难以处理

export type Slices<T, U> = Record<keyof T, Slice<U>>;
export type Reducers<T,U> = Record<keyof T, CaseReducerWithPrepare<U, PayloadAction<any, string, never, never>>>;

export function combiner<T> (name : string, state : T, slices : Slices<T, any>,  reducers : Reducers<T, any>) 
    : Slice<T, SliceCaseReducers<T>, string> {
        let options : ValidateSliceCaseReducers<T, SliceCaseReducers<T>> = {}; 
        options = produce(options, draft => {
            for(let key in slices) {
                draft[key]=slices[key].reducer;
            }
            for(let key in slices) {
                draft[key]=reducers[key];
            }    
        })
        return createSlice({
            name,
            initialState : state,
            reducers : options
        })
};

如您所见，

key1

和

key2

的模式是相同的。因此，我希望将负责

key1

和

key2

的切片代码的相同位参数化，以处理状态的正确部分

这个例子同样具有代表性。我正在处理的state对象很大，而且有深度

另外，state对象在第三方库中被描述为“typescript”接口。我认为我应该继续处理相同的问题，而不是编写自己的JSON模式。因此，我在这里使用

keyof

操作符

---

但是，如果我能正确地解决参数化问题，我就能显著地重用代码。

我很困惑您在这里做什么。您的

product（）。“切片还原器”是
createSlice
的输出，您不会将它们传递给另一个
createSlice
调用。你是在找吗？@markerikson谢谢你的回复。我很高兴有一位Redux维护人员回答了我的问题！我已经更新了代码示例以更正您指出的错误。@markerikson正如我提到的，我正在尝试做一些非常规的事情。我正在考虑合并切片。“我将在接下来的几分钟内进一步更新这个问题，以提供一些澄清。”markerikson补充道。希望这有助于更好地解释我在这里尝试做的事情，以及它是否可行（即使在键入方面有风险）。@markerikson，正如你建议的，我可以选择combineReducers。如果这是一个建议，我将能够使用CreateSicle只比叶子高一层。如果这是正确的方法，我将转向使用组合器而不是切片。但正如我提到的，筑巢很深。重用可能发生在不同的深度。当然，每个不同的模式都有自己的切片相关代码。我很困惑您在这里做什么。您的
product（）。“切片还原器”是
createSlice
的输出，您不会将它们传递给另一个
createSlice
调用。你是在找吗？@markerikson谢谢你的回复。我很高兴有一位Redux维护人员回答了我的问题！我已经更新了代码示例以更正您指出的错误。@markerikson正如我提到的，我正在尝试做一些非常规的事情。我正在考虑合并切片。“我将在接下来的几分钟内进一步更新这个问题，以提供一些澄清。”markerikson补充道。希望这有助于更好地解释我在这里尝试做的事情，以及它是否可行（即使在键入方面有风险）。@markerikson，正如你建议的，我可以选择combineReducers。如果这是一个建议，我将能够使用CreateSicle只比叶子高一层。如果这是正确的方法，我将转向使用组合器而不是切片。但正如我提到的，筑巢很深。重用可能发生在不同的深度。当然，每个不同的模式都有自己的切片相关代码。
{
   "key1" : {
       "A" : "SomeA",
       "B" : "SomeB"
    },
   "key2" : {
       "A" : "SomeA",
       "B" : "SomeB"
    }
}