理解React-Redux中的useDispatch和dispatch-有解無憂

我試圖理解我過去的同事撰寫的代碼。

據我了解，useDispatch 接受一個包含 action type 和 payload 的物件，它將與所有 reducer進行比較，狀態將相應更改。然而，在下面的代碼中，他傳遞了一個完整的函式而不是一個物件。我的問題是為什么useDispatch 仍然可以在不傳入 object的情況下運行，因為該函式不回傳任何內容。

下面是 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,
            });
        }
    };

uj5u.com熱心網友回復：

對于 redux 本身，你只能 dispatch 一個純 JS 物件的動作（或者一個動作創建者回傳一個動作，這個動作是一個純 JS 物件必須有一個type欄位。）。但是使用各種中間件，您可以調度各種東西，例如 thunk、純 JS 物件操作等。中間件最終會將操作轉換為純 JS 物件操作。

當使用redux-thunk中間件時，你可以像這樣發送一個 thunk：

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

store.dispatch(thunkFunction)

loginthunk 動作創建者確實回傳了一個 thunk 。

thunk action creator 是一個可能有一些引數的函式，并回傳一個新的 thunk 函式。請參閱撰寫 Thunks

另一個例子，redux-promise-middleware，

給定具有異步負載的單個操作，中間件將操作轉換為單獨的待處理操作和單獨的已完成/已拒絕操作，表示異步操作的狀態。

您可以使用異步有效負載調度操作：

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

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/414477.html

標籤：

上一篇：將屬性添加到Array打字稿的型別

下一篇：指定物件中陣列的型別（打字稿）