3

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

用例- 我正在尝试组合切片。切片用于独立的状态片段，其接口由第三方库定义。

我正在尝试做一些非常规的事情。我已经很久没有在 React 或 redux 上做任何认真的工作了，所以我可能错过了一些有用的库。我已经完成了初步扫描，但没有找到任何适合我口味的东西。然而，建议总是受欢迎的。

另外，这是我第一次认真尝试使用打字稿。因此，尽管我已经完成了作业，但我的大脑还没有被所有打字稿习语和好东西连接起来。

我不想放弃我仅​​用于此用例的任何技术。

这个用例将不断重复。我相信社区中的其他人也面临过类似的问题。

由于 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
        })
};

我在这里做一些与风险类型相关的事情。但是代码将被深埋。由于这不是合同 API 的一部分，所以我可能会做一些疯狂的事情。

但是，如果我能找到一种惯用的方法，我可以将这个逻辑推广到上游，甚至可以开源它。

有什么建议么？

编辑：添加进一步说明

Slice 有 2 个输出，CaseReducers 和一个 reducer，我认为这是一个 reducer，它结合了提供给 slice 的所有 reducer。我还没有完成在我的代码中为上面的代码运行单元测试。在隐藏上面的代码是否真的可以工作的其他错误中有点迷失。我以为是在某一时刻。

请注意，上面的代码是实际代码的代表。

这是一个示例架构

{
   "key1" : {
       "A" : "SomeA",
       "B" : "SomeB"
    },
   "key2" : {
       "A" : "SomeA",
       "B" : "SomeB"
    }
}

如您所见，key1和的架构key2是相同的。所以我希望有相同的切片代码来处理key1和key2参数化以处理状态的正确部分。

同样，这个例子是有代表性的。我正在处理的状态对象很大并且有深度。

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

但是如果我能正确解决这个参数化问题，我可以显着地重用代码。

4

0 回答 0