将 immer 用于 Redux 的 reducer 时出现 typescript 错误

Question

我正在尝试在 Typescript 项目中将 Immer 与 Redux 结合使用。

Redux reducer 可以输入为:

Reducer<State, Action>

我应该能够用 Immer's produce function 创建一个等效的 reducer 这允许我们改变草稿副本。但是类型不匹配。错误:“Undefined is not assignable to ...” 这可能与 redux 在开始时将 undefined 作为 state 的参数传递有关。如果 reducer 不匹配 Reducer<State, Action>我无法将其传递给 createStore

typescript 版本 3.5.3。

我怎样才能优雅地解决这个问题？

Answer 1

当使用 produce 函数的柯里化(Currying)形式(将函数作为第一个参数传递)时，您可以传递第二个参数作为默认值。当 Redux 在初始化时使用未定义的值调用您的 reducer 时，这可以解决类型不匹配的问题。

const initState = {
    text: "hello"
}

type State = {
    text: string
} 
type Action = {
    type: "newUrl"
    text: string 
}

const reducer: Reducer<State, Action> = produce( 
    (draftSt: Draft<State>, action: Action) => {
        switch(action.type){
            case "newUrl": 
                draftSt.text = action.text
                break 
        }
    }, 
    initState
)

reducer 可以安全地传递给 createStore 或 configureStore。