Question

我有一个react redux应用程序，但在将操作分派给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'传递给调度函数。
首先，重击需要一些修改。正如文档所说的here

thunk是包装表达式以延迟其求值的函数

因此，需要按以下方式更改thunk。

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

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

现在将这个重击传递给store.dispatch()函数。

menuStore.dispatch(updateData);

Answer 2

如果使用thunk，则您的操作需要返回一个函数。该功能将使用dispatch作为参数，该参数将用于基于api响应来调度动作。
在调用调度时，您不需要使用中间件。
还需要在分派menuStore.dispatch(updateData())中调用操作，而不仅仅是传递引用

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

用法

menuStore.dispatch(updateData())

调度未将动作发送到减速器

2 个答案: