Question

所以我有一个定义以下内容的操作文件：

export const LogInUser = (user:User, token:string) => ({
  type: UserActions.LoginUser, payload: {
    user: user, token: token
  }
})

太棒了

为了连接它，我编写了一个mapDispatchToProps方法：

const mapDispatchToProps = (dispatch:any)=>({
  loginUser: (user:User, token:string)=>{dispatch(LogInUser(user, token))}
})

所以现在我基本上是在复制现有的方法签名。很好，我可以接受。这实际上是一个好主意-如果我的操作的方法签名由于某种原因与我要在实际页面上公开的内容不同，该怎么办？当然，这就是我们这样做的原因。我不需要额外的功能，但这可能很方便。

但是现在我必须去找道具，再次复制它：

interface Props extends RouteComponentProps<any>{
  loginUser: (user:User, token:string)=>void
}

在这一点上，我想知道为什么为什么不首先将dispatch传递给基础类，而不是将其包装在方法调用中。我见过的每一篇教程都必须有原因，因为使用这种基本模式是公平的，尽管其中大多数都是javascript，而不是打字稿，并且不要写东西再写。多次编写相同的方法声明。

Answer 1

是的，可以使用多种技术来简化所有操作。

首先，我们建议您使用the "object shorthand" form of mapDispatch，而不是将其定义为函数：

// could be shorter if the function names matched
const mapDispatch = {loginUser: LogInUser} 

// or, even just pass UserActions to connect directly

第二，our new Redux Starter Kit package是我们推荐的工具集，用于以良好的实践编写更简单的Redux代码。它包含a createSlice function，可自动自动生成动作创建者和动作类型，因此您无需手动编写它们：

type UsersState = {
    user : User | null,
    token: string | null;
}

const usersSlice = createSlice({
    name: "users",
    initialState: {user: null, token: null} as UsersState,
    reducers {
        loginUser(state, action: PayloadAction<{user: User, token: string>}) {
            return action.payload;
        }
    }
})

// usersSlice.actions.loginUser was automatically generated

您已经使用我在https://stackoverflow.com/a/58630099/62937中描述的connect方法，使TS自动推断了从ConnectedProps<T>传递到您自己的组件的类型。

最后，our new React-Redux hooks API通常比connect更容易进行静态键入，包括根本不需要定义mapDispatch。

还有其他问题，dispatch is passed in to a connected component if you don't provide mapDispatch as an argument，但we've always recommended using action creators to keep your components "unaware of Redux"。

我建议通读the Redux Starter Kit "Advanced Tutorial" docs page，以查看有关如何将RSK与TypeScript和React-Redux挂钩一起使用的示例。

我可以减少Redux代码中的打字稿样板重复吗？

1 个答案: