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

Question

对于我的 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),
  )
);

Answer 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的大型项目中这样做了，也许它并不适合每个项目。