Multiple Reducer applications, with Redux-Thunk

  • Each page or component has a separate Reducer
  • Reduce multiple reducers to a reducer using combineReducers
  • Component store, index is the import and export file

// src/store/index.js
import { createStore, compose, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)));
export default store;
Copy the code
// src/store/reducer.js import { combineReducers } from 'redux'; import { reducer as homeReducer } from './.. /pages/home/store'; import { reducer as loginReducer } from './.. /pages/login/store'; const reducer = combineReducers({ home: homeReducer, login: loginReducer, }); export default reducer;Copy the code
  • Reducer1. Here take the Reducer of the home component as an example

// pages/home/store/index.js
import reducer from './reducer'
import * as actionTypes from './actionTypes'
import * as actionCreators from './actionCreators'

export {
  reducer,
  actionTypes,
  actionCreators
}
Copy the code
// pages/home/store/reducer.js
const defaultState = {
  name: 'home'
}

const reducer = (state = defaultState, action) => {
  if (action.type === 'HOME_TYPE') {
    return state
  }
  return state
}
export default reducer
Copy the code
// pages/home/store/actionTypes.js
export const NAME = 'HOME'
Copy the code
// pages/home/store/actionCreators.js
import { actionTypes } from './index'
export const setName = () => ({
  type: actionTypes.NAME
})
Copy the code

Multiple Reducer, immutable

  • If the component data is managed using the Immutable. Js object
  • The root reducer can be used redux-immutable for more reasonable use
  • Reference documentation
  • The installationnpm install immutable
  • The installationnpm install redux-immutable
  • Change the component’s array format to IMmutable
// pages/home/store/reducer.js
import { fromJS } from 'immutable'
const defaultState =fromJS({
  name: 'home'
})

const reducer = (state = defaultState, action) => {
  if (action.type === 'HOME_TYPE') {
    return state
  }
  return state
}
export default reducer
Copy the code
  • The root Reducer is generated using the combineReducer provided by Redux-immutable

// src/store/reducer.js // import { combineReducers } from 'redux'; import { combineReducers } from 'redux-immutable' import { reducer as homeReducer } from './.. /pages/home/store'; import { reducer as loginReducer } from './.. /pages/login/store'; const reducer = combineReducers({ home: homeReducer, login: loginReducer, }); export default reducer;Copy the code
  • Immutable to obtain data

  • Data modification is immutable, that is, data modification from the Reducer. Obtain and modify data using immutable get and set methods

When immutable is used, it is recommended that components inherit PureComponent

Reference documentation

  • If you are using immutable for data management, you can improve performance by changing all inherited components to pureComponents. If imMUTABLE is not used, it is recommended to use Component instead, because this is sometimes a bit of a hickey. If immutable is not used for data management, you can also write shouldComponentUpdate to optimize performance

  • PureComponent has a shouldComponentUpdate hook that doesn’t rerender data changes that aren’t relevant to its component, greatly improving performance.