Dispatch 不將操作發送到減速器

Question

我有一個反應 redux 應用程序，我在將操作分派給減速器時遇到問題。 這就是我的 actions.js

import GetDataFromAPIs from "../utils/api-data";
export const UPDATE_DATA = 'UPDATE_DATA';

export const updateData = async => {
    const newData = await GetDataFromAPIs();

    return{
        type: UPDATE_DATA, 
        payload: newData
    };
};

這就是我從 index.js 調用updateData的方式：

const menuStore = createStore(MyReducer, composeWithDevTools(applyMiddleware(thunk)));
menuStore.dispatch(applyMiddleware(thunk)(updateData));

我可以單步執行actions.js，但我沒有看到menuStore.dispatch 將操作發送到reducer。 我錯過了什么？

Answer 1

使用 thunk 中間件時，您需要將“thunk”傳遞給調度 function。
首先，thunk 需要一些修改。 正如文檔所說here

thunk 是 function 包裝表達式以延遲其評估

因此需要如下改變thunk。

export const updateData = async (dispatch)=> {
   const newData = await GetDataFromAPIs();

   dispatch({
      type: UPDATE_DATA, 
      payload: newData
    });
};

現在將此 thunk 傳遞給store.dispatch() function。

menuStore.dispatch(updateData);

Answer 2

• 如果使用 thunk，那么您的操作需要返回 function。 該函數將 dispatch 作為參數，用於根據 api 響應調度操作。
• 在調用調度時，您不需要使用中間件。
• 還需要在調度menuStore.dispatch(updateData())中調用該操作，而不僅僅是傳遞引用

export const updateData = inputData => async dispatch => {
    const newData = await GetDataFromAPIs();
    dispatch({
        type: UPDATE_DATA,
        payload: newData
    })
};

用法

menuStore.dispatch(updateData())