Jump To …

【日常】创建全局唯一的store demo

【日常】创建全局唯一的store

  1. applyMiddleware -> compose -> enhancer
  2. combineReducers -> rootReducer
  3. createStore(rootReducer, initialState, enhancer);

    see: https://github.com/barrystaes/react-trebuchet/tree/test-bottledapi-apireduxmiddleware/src/store

import { 
  createStore, 
  compose, 
  applyMiddleware, 
  combineReducers 
} from '../utils/rx';
import thunk from 'redux-thunk';
import createLogger from 'redux-logger';
import { hashHistory } from 'react-router';
import { routerMiddleware, routerReducer } from 'react-router-redux';
import promiseMiddleware from 'redux-promise-middleware'; 
import { loadingBarReducer } from 'react-redux-loading-bar';
import { loadingBarMiddleware } from './loadingBarMiddleware';
  • 把Models转成Reducers注入到redux 同时redux生成的store赋予BaseModel和BaseSelector
import { createReducerAndModels } from './createReducerFactory';
import enhanceStore from './enhanceStore';

let appStore;
export default function configureStore(initialState, storeMiddlewares, createReducer) {
  if(appStore) return appStore;

  const logger = createLogger({
    level: 'info',
    collapsed: true
  });

  const router = routerMiddleware(hashHistory);

  const enhancer = compose(
    applyMiddleware(thunk, router, logger, ...storeMiddlewares, promiseMiddleware(), loadingBarMiddleware({promiseTypeSuffixes: ['START', 'SUCCESS', 'ERROR']})),
    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : noop => noop
  );

  const { Models, hotAcceptId, hotModelsFeedback } = createReducer(module.hot);

  const { reducers, models } = createReducerAndModels({routing: routerReducer, loadingBar: loadingBarReducer}, Models);
  
  const rootReducer = combineReducers(reducers);

  appStore = createStore(rootReducer, initialState, enhancer);
  
  enhanceStore(appStore, models, reducers);

  // #! 集成到chrome插件redux
  if (window.__REDUX_DEVTOOLS_EXTENSION__) {
    window.__REDUX_DEVTOOLS_EXTENSION__.updateStore(appStore);
  }
  if (module.hot && hotModelsFeedback) {
    module.hot.accept(hotAcceptId, () => {
      
      const Models = hotModelsFeedback();

      configureStore.replace(appStore, Models);
    });
  }

  return appStore;
}


configureStore.replace = function(appStore, Models){
  const { reducers, models } = createReducerAndModels({routing: routerReducer, loadingBar: loadingBarReducer}, Models);
  
  const rootReducer = combineReducers(reducers);
  
  appStore.replaceReducer(rootReducer);
  
  // #! 重新赋值models
  Object.assign(appStore.models, models);
}