javascript - Dispatch 不将操作发送到 reducer

Question

我有一个 React Redux 应用程序，但在将操作分派(dispatch)到 reducer 时遇到问题。这就是我的 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' 传递给调度函数。
首先，thunk 需要一些修改。正如文档所说 here

A thunk is a function that wraps an expression to delay its evaluation

因此需要如下更改thunk。

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

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

现在将此 thunk 传递给 store.dispatch() 函数。

menuStore.dispatch(updateData);