理解 React-Redux 中的 useDispatch 和 dispatch

Question

我正在尝试理解我过去的同事编写的代码。

据我了解，useDispatch 接收一个包含操作类型和有效载荷的对象，这将与所有减速器 并且 状态将相应更改 。然而，在下面的代码中，他传递了一个完整的函数而不是一个对象。我的问题是为什么 useDispatch 仍然可以在不传递对象的情况下运行 ，因为该函数没有 return 任何东西。

下面是useDispatch函数和action函数。

    const dispatch = useDispatch();

    const handleSubmit = (e: any): void => {
        dispatch(login("email", "password"));
    };

export const login =
    (email: string, password: string) =>
    async (dispatch: Dispatch<LoginActions>) => {
        try {
            // Update the store
            dispatch({
                type: USER_ACTIONS.USER_LOGIN_REQUEST,
            });


            const data = await loginRequest({ email, password });

            dispatch({
                type: USER_ACTIONS.USER_LOGIN_SUCCESS,
                payload: data,
            });
        } catch (error: any) {
            dispatch({
                type: USER_ACTIONS.USER_LOGIN_FAIL,
                payload:
                    error.response && error.response.data.message
                        ? error.response.data.message
                        : error.message,
            });
        }
    };

Answer 1

对于 redux 本身，你只能派发 action，它是一个普通的 JS 对象（或者一个 action creator returns 一个 action，这个 action 是一个普通的 JS 对象必须有一个 type 字段.).但是有了各种中间件，你可以派发各种东西，比如一个thunk，普通的JS对象动作等等。中间件最终会把动作转换成普通的JS对象动作。

使用 redux-thunk 中间件时，您可以像这样发送一个 thunk：

const thunkFunction = (dispatch, getState) => {
  // logic here that can dispatch actions or read state
}

store.dispatch(thunkFunction)

login thunk 动作创建者做了 return thunk。

thunk 动作创建器是一个可能有一些参数的函数，return是一个新的 thunk 函数。参见 Writing Thunks

另一个例子，redux-promise-middleware,

Given a single action with an async payload, the middleware transforms the action to separate pending action and a separate fulfilled/rejected action, representing the states of the async action.

您可以使用异步负载分派操作：

const response = dispatch({
    type: 'FIRST',
    payload: new Promise(...),
});

理解 React-Redux 中的 useDispatch 和 dispatch

Understanding useDispatch and dispatch in React-Redux

typescript

reactjs

redux

react-hooks