React 和 Redux：Redux 自定义中间件未执行

Question

下面的代码是我自定义的 redux 中间件。在 removeItemFlow 函数中，action.type === REMOVE_ITEM 没有被执行，即使我从前端按下删除按钮并且类型：REMOVE_ITEM 和有效负载成功执行但中间件没有抓住它。我已经为此苦苦挣扎了两天，所以我们将不胜感激任何帮助。谢谢。

//自定义Redux中间件

export const getItemsFlow = ({getState, dispatch}) => next => action => {
  next(action);
  if (action.type === GET_ITEMS) {
    dispatch(apiGetRequest('/api/items/water/', setAuthorizationHeader(getState), FETCH_ITEMS_SUCCESS, FETCH_ITEMS_ERROR));
    dispatch(loadingData());
  }

};


export const processItemsCollection = ({dispatch}) => next => action => {
  next(action);
  if (action.type === FETCH_ITEMS_SUCCESS) {
    dispatch(updateItems(action.payload.data));
  }

};


export const removeItemFlow = ({getState, dispatch}) => next => action => {
  next(action);

  if(action.type === REMOVE_ITEM){
      console.log(action.type)
          dispatch(apiDeleteRequest(`/api/items/water/${action.payload.id}`, setAuthorizationHeader(getState), REMOVE_ITEM_SUCCESS, REMOVE_ITEM_ERROR));
    }


};

export const itemsMdl = [getItemsFlow, processItemsCollection, removeItemFlow];

//Redux 商店

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store     = createStore(
rootReducer,
composeEnhancers(
  applyMiddleware(...itemsMdl, ...api),
)
);

Answer 1

我在这里有一些观察。 None 其中可以直接解决您的问题，但它们最终可能会为您指明没有此问题的替代方法。

首先，您的自定义中间件 none 实际上是 returning next(action) 的结果。在这种情况下，它可能不会破坏任何东西，但是一个好的 Redux 中间件应该总是尝试 return 它给出的结果：

const result = next(action);

// do more logic here if you want to
return result;

其次，您不需要将其分成三个不同的中间件。您可以将其作为内部具有多个条件的单个中间件来完成。

第三，这个真的感觉完全不需要自定义中间件。使用自定义 Redux 中间件没有错误，但在这种情况下，您似乎可以通过使用 Redux Toolkit's createAsyncThunk API 更简单地完成您正在做的事情，它将基于关于异步请求和承诺。

此外，您绝对应该使用 our official Redux Toolkit package 来编写您的逻辑，包括 configureStore 来替换您那里的商店设置代码。

至于您描述的具体错误：我没有立即看到错误，因此很难知道发生了什么。我建议在这些中间件中添加日志记录，看看它们是否运行，以及您期望的操作是否真的到达了它们。

React 和 Redux：Redux 自定义中间件未执行

React and Redux: Redux Custom Middleware Not Executing

reactjs

redux

redux-thunk

react-redux