React 和 Redux：管理 Redux 自定义中间件列表

Posted 2023-02-22

【中文标题】React 和 Redux：管理 Redux 自定义中间件列表

【英文标题】：React and Redux: Managing Redux Custom Middleware List

【发布时间】：2021-03-11 06:49:06

【问题描述】：

对于我的 react 应用程序，我构建了许多自定义中间件并将它们传递给 applyMiddleware()。因为我有这么多，redux 存储文件看起来有点拥挤。将它们全部传递到 applyMiddleware() 或将它们导入到函数内的单独文件中，然后将该函数传递到 applyMiddleware() 以保持干净是一种好习惯吗？

// Redux store
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export const store = createStore(
  reducers,
  composeEnhancers(
    applyMiddleware(...xMdl, ...yMdl, ...zMdl, ...nAmountsOfMdl),
  )
);

【参考方案1】：

我更喜欢使用 combineReducers 为 reducer 创建组。 生病分享我的中间件设置，希望它对你有帮助！

store.config.js：

import rootReducer from '../_reducers'

export const history = createBrowserHistory()

export const store = configureStore();

export default function configureStore(preloadingState) 
  const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
  const store = createStore(
    rootReducer(history),
    preloadingState,
    composeEnhancer(
      applyMiddleware(
        routerMiddleware(history),
        thunk,
      ),
    ),
  )

  return store

index.js（在 reducers 文件夹中）：

const rootReducer = (history) => combineReducers(
    router: connectRouter(history),
    single: combineReducers(
        post: postReducer,
        guide: guideReducer,
        course: courseReducer,
        lesson: lessonReducer,
        exercise: exerciseReducer,
    ),
    bank: combineReducers(
        posts: postsReducer,
        guides: guidesReducer,
        courses: coursesReducer,
        lessons: lessonsReducer,
        exercises: exercisesReducer,
    ),
    melodition: playerReducer,
    user: combineReducers(
        profile: profileReducer,
        favorites: favoriteReducer,
    ),
    snackbar: snackbarReducer,
    auth: authReducer,
);

export default rootReducer;

注意：我是在 connected-react-router 的一个大型项目中这样做的，也许并不是对每个项目都有好处。

【讨论】：

谢谢。很高兴看到其他人在做什么。感谢分享！

另外，我的自定义 api 中间正在触发，但不是我的删除。您如何处理自定义删除 api 中间件？

没问题很乐意帮助你，你能分享你删除api中间件的详细信息吗？你发了吗？我有用于处理服务器端 api 的 wordpress，但在从 redux 中删除数据的应用程序中存储了一个用于制作新项目数组的操作，例如：export const deletePost = (id) => ((dispatch,getState) => const newPosts = getState().bank.posts.data.filter(post => post.id !== id);dispatch( type: DELETE_POST, newPosts ))