React-js 和 Typescript - 将 connect() 转换为 useSelect、useDispatch()答案

【问题标题】：React-js and Typescript - Convert connect() to useSelect, useDispatch()React-js 和 Typescript - 将 connect() 转换为 useSelect、useDispatch()
【发布时间】：2022-01-10 22:20:59
【问题描述】：

谁能帮我把我使用 connect() 的代码转换成 useSelect() 和 useDistpatch()，用 reactjs-redux 和 typescript。谢谢

    const mapDispatchToProps = (dispatch: any) => ({
      onAddUser: (user: UserResponse) => {
        dispatch(addUser(user))
      }
    })
    
    export default connect(
      null,
      mapDispatchToProps
    )(AddUser)

和

    const UsersLists = ({ users, onDelete }: any) => (
      <div>
        {users.map((user: any) => (
          <DeleteUser key={user.id} onDelete={onDelete} user={user} />
        ))}
      </div>
    )
    
    const mapStateToProps = (state: any) => ({
      bookmarks: state
    })

const mapDispatchToProps = (dispatch: any) => ({
  onDelete: (id: number) => {
    dispatch(deleteUser(id))
  }
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UsersLists)

【问题讨论】：

您好，欢迎使用 StackOverflow，您是否在应用程序中使用 Redux Toolkit？
嗨.. mm redux-Toolkit，不，但没问题。

标签： reactjs typescript react-redux

【解决方案1】：

我仍然会使用容器模式，因为它可以很好地分离表示和布线之间的关注点，从而简化测试：

type UserListProps = {
    users: IUser[];
    onAdd: (user: IUser) => void;
    onDelete: (user: IUser) => void;
};

const UsersLists = (props: UserListProps) => {
    const { users } = props;

    return (
        <div>
            {users.map((user: any) => (
                <DeleteUser
                    key={user.id}
                    onDelete={props.onDelete}
                    user={user}
                />
            ))}
        </div>
    );
};

对于容器：

export const UsersListsContainer = () => {
    const dispatch = useDispatch();
    const users = useSelector(selectors.$users);
    const bookmarks = useSelector(selectors.$bookmarks);

    const onAddUser = useCallback(
        (user: IUser) => {
            dispatch(actions.addUser(user));
        },
        [dispatch]
    );

    const onDeleteUser = useCallback(
        (user: IUser) => {
            dispatch(actions.deleteUser(user.id));
        },
        [dispatch]
    );

    return (
        <UserLists
            users={users}
            bookmarks={bookmarks}
            onAddUser={onAddUser}
            onDeleteUser={onDeleteUser}
        />
    );
};

【讨论】：