在NextJS应用程序中模块化化简的推荐方法？

Question

我有一个Redux存储，它位于名为/web/reducers/index.js的文件中，如下所示：

import { createStore } from 'redux';

const reducer = (state = {
  userData: '',
  sessID: '',
  openSignInDialog: false,
  showSignInView: true,
  showSignUpView: false,
  flagEmailError: false,
  emailWarning: 0,
  firstNameError: false,
  lastNameError: false,
  usernameError: false,
  passwordError: false,
  passwordErrorSignIn: false,
  password2Error: false,
  dbError: false,
  credentialsError: 'none',
  registered: null,
  firstNameHelper: 'Your first name',
  lastNameHelper: 'Your last name',
  usernameHelper: 'Your username of choice',
  passwordHelper: 'Enter a secret password',
  password2Helper: 'Enter password again',
}, action) => {
  switch (action.type) {
    case 'ADDUSER':
      return { ...state, userData: action.payload };
    case 'ADDSESSION':
      return { ...state, sessID: action.payload };
    case 'OPENSIGNINDIALOG':
      return { ...state, openSignInDialog: action.payload };
    case 'SHOWSIGNINVIEW':
      return { ...state, showSignInView: action.payload };
    case 'SHOWSIGNUPVIEW':
      return { ...state, showSignUpView: action.payload };
    case 'OPENSUBMITEMAILDIALOG':
      return { ...state, openSubmitEmailDialog: action.payload };
    case 'FLAGCREDENTIALSERROR':
      return { ...state, credentialsError: action.payload };
    case 'FLAGEMAILERROR':
      return { ...state, flagEmailError: action.payload };
    case 'FLAGPASSWORDERROR':
      return { ...state, passwordErrorSignIn: action.payload };
    case 'WARNFOREXISTINGEMAIL':
      return { ...state, emailWarning: action.payload };
    case 'CHANGEFNHELPER':
      return { ...state, firstNameHelper: action.payload };
    case 'CHANGELNHELPER':
      return { ...state, lastNameHelper: action.payload };
    case 'CHANGEUNHELPER':
      return { ...state, usernameHelper: action.payload };
    case 'CHANGEPASSHELPER':
      return { ...state, passwordHelper: action.payload };
    case 'CHANGEPASS2HELPER':
      return { ...state, password2Helper: action.payload };
    case 'TOGGLEFNERROR':
      return { ...state, firstNameError: action.payload };
    case 'TOGGLELNERROR':
      return { ...state, lastNameError: action.payload };
    case 'TOGGLEUNERROR':
      return { ...state, usernameError: action.payload };
    case 'TOGGLEPASSERROR':
      return { ...state, passwordError: action.payload };
    case 'TOGGLEPASS2ERROR':
      return { ...state, password2Error: action.payload };
    case 'TOGGLEDBERROR':
      return { ...state, dbError: action.payload };
    case 'UPDATEREGISTEREDUSER':
      return { ...state, registered: action.payload };
    default:
      return state;
  }
};

const makeStore = initialState => createStore(reducer, initialState);

export default makeStore;

从代码中可以明显看出，这家商店的规模开始变得一发不可收拾，我预计随着项目的进行，它的规模将不断扩大。我的问题是，将其分解为单独的文件以进行更好的管理的推荐方法是什么？

FWIW，我正在使用next-redux-wrapper在我的NextJS项目中实现Redux。