From 9f281c670428f2ee0f4b3411c1b4db570ce6f1a7 Mon Sep 17 00:00:00 2001 From: Amila Welihinda Date: Fri, 31 Mar 2017 17:09:07 -0700 Subject: [PATCH] Redux Store Refactor (#886) * Change the store to make adding middleware and enhancers more accommodating (#602) * wrapped the store creation all inside the default function * set-up middleware and enhancers array to allow building what is included. For example the case of having a store specific to the main process vs the renderer process or even could be used to combine the development and production stores and add what is needed based on the ENV. * Code style changes * Fixed flow annotation --- app/store/configureStore.development.js | 68 +++++++++++++++---------- 1 file changed, 40 insertions(+), 28 deletions(-) diff --git a/app/store/configureStore.development.js b/app/store/configureStore.development.js index 99887a7..3677cf5 100644 --- a/app/store/configureStore.development.js +++ b/app/store/configureStore.development.js @@ -4,36 +4,48 @@ import { hashHistory } from 'react-router'; import { routerMiddleware, push } from 'react-router-redux'; import createLogger from 'redux-logger'; import rootReducer from '../reducers'; - import * as counterActions from '../actions/counter'; import type { counterStateType } from '../reducers/counter'; -const actionCreators = { - ...counterActions, - push, -}; - -const logger = createLogger({ - level: 'info', - collapsed: true -}); - -const router = routerMiddleware(hashHistory); - -// If Redux DevTools Extension is installed use it, otherwise use Redux compose -/* eslint-disable no-underscore-dangle */ -const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? - window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ - // Options: http://extension.remotedev.io/docs/API/Arguments.html - actionCreators, - }) : - compose; -/* eslint-enable no-underscore-dangle */ -const enhancer = composeEnhancers( - applyMiddleware(thunk, router, logger) -); - -export default function configureStore(initialState?: counterStateType) { +export default (initialState: ?counterStateType) => { + // Redux Configuration + const middleware = []; + const enhancers = []; + + // Thunk Middleware + middleware.push(thunk); + + // Logging Middleware + const logger = createLogger({ + level: 'info', + collapsed: true + }); + middleware.push(logger); + + // Router Middleware + const router = routerMiddleware(hashHistory); + middleware.push(router); + + // Redux DevTools Configuration + const actionCreators = { + ...counterActions, + push, + }; + // If Redux DevTools Extension is installed use it, otherwise use Redux compose + /* eslint-disable no-underscore-dangle */ + const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ + ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ + // Options: http://zalmoxisus.github.io/redux-devtools-extension/API/Arguments.html + actionCreators, + }) + : compose; + /* eslint-enable no-underscore-dangle */ + + // Apply Middleware & Compose Enhancers + enhancers.push(applyMiddleware(...middleware)); + const enhancer = composeEnhancers(...enhancers); + + // Create Store const store = createStore(rootReducer, initialState, enhancer); if (module.hot) { @@ -43,4 +55,4 @@ export default function configureStore(initialState?: counterStateType) { } return store; -} +};