Redux工具箱:从切片文件导出一个自定义钩子来访问动作，而不是导出所有的动作，然后再次调用调度? &

Question

在切片文件中，我们导出该切片的所有操作。例如:

export const {signoutUser, updateProfile, authenticateUser, clearUserState} = sliceName.actions;

然后我们根据您的文件夹结构从切片或动作文件中导入useDispatch和特定的动作。例如

import {clearUserState} from './slice';
import { useDispatch } from 'react-redux';
export const Component () {
const dispatch = useDispatch(clearUserState());
//rest component body
}

现在我要从切片文件中导出一个自定义钩子，如下所示:

export const useUserDispatch = () => {
const dispatch = useDispatch();

const userDispatch = {
signoutUser: (data) => dispatch(signoutUser(data)),
updateProfile: (data) => dispatch(updateProfile(data)),
authenticateUser: (data) => dispatch(authenticateUser(data)),
clearUserState: () => dispatch(clearUserState())
};
return {userDispatch}
};

然后我可以导入那个钩子然后使用

const {userDispatch}=useUserDispatch();
//inside component
<button onClick={userDispatch.clearUserState()}>Dispatch Button</button>

我只是想知道，如果这是不推荐的东西，在redux编写代码的方式或我做错了什么，它工作得很好，虽然。

Answer 1

您的代码没有任何问题。根据我的经验，这个问题不能回答利弊，redux和所有其他开源软件包考虑人们在日常应用中使用的基本常见情况。可能会有一些改进建议，但不是每个应用程序的最佳情况解释。你可以考虑遵循并决定自己

你不能像你提到的useUserDispatch().clearUserState()那样使用它们例如

<button onCleack={useDispatcher().clearUserState}>clear</button>

1. 钩子可以被有条件地调用，所以在UI部分调用它们可能会被有条件地取消，这是非常常见的情况
2. 每次调用这个钩子时，都会为dispatchers创建一个新的对象

同样，useDispatch不接收任何参数，并返回最近的redux提供者store.dispatch。参见源代码

注意:Redux建议为所有应用程序提供一个状态，并且不会将部分代码与多个提供商包装在一起。

请记住，如果你需要这个调度程序(例如updateProfile)从代码的其他部分，你可能需要使用这个钩子，这是浪费资源，或者直接使用它，这显示了一点不确定性，与其他版本不一致(只是一点点不是一个大的情况)。

有其他的选择来处理这些情况。请记住redux对一个提供程序的建议，如果您接受也可以编写自己的调度程序的话。

const storeDispatch = store.dispatch
// from slice file export dispatcher instead of action creator
const updateProfile = sliceName.actions.updateProfile;
export const updateProfileDispatcher = (data) => storeDispatch(updateProfile(data))

这不仅可以在你的组件中使用，也可以在逻辑内部的react组件外部使用注意:在react之外使用分派器不是标准或推荐的模式，你可能不想使用它。

你也可以传递dispatch作为参数，比如thunk dispatcher

const updateProfile = dispatch => (data) => dispatch(updateProfile(data))
// or alongside of payload data
const updateProfile = (dispatch, data) => dispatch(updateProfile(data))
// also can set the default value of dispatch to store.dis
const updateProfile = (data, dispatch=storeDispatch) => dispatch(updateProfile(data))

// component
const dispatch = useDispatch()
<ProfileComponent onUpdate={updateProfile(dispatch)} />