diff --git a/README.md b/README.md index 9fec703..f78c798 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,14 @@ Or directly from unpkg #### Initialization +There are three ways to instantiate ngRedux: + +1. [createStoreWith](#createStoreWith) +2. [provideStore](#provideStore) +3. [createStore](#createStore) + +##### createStoreWith + You can either pass a function or an object to `createStoreWith`. With a function: @@ -92,7 +100,9 @@ angular.module('app', [ngRedux]) ``` In this example `reducer1` will be resolved using angular's DI after the config phase. -Alternatively, you can pass an already existing store to ngRedux using `provideStore`: +##### provideStore + +You can pass an already existing store to ngRedux using `provideStore`: ```JS import reducers from './reducers'; @@ -108,6 +118,33 @@ angular.module('app', [ngRedux]) }); ``` +##### createStore + +`createStore` allows you take full control over the store creation. This is handy +if you want to control the order of enhancers by your self. It takes a function +that gets middlewares and enhancers from ngRedux as a parameters. Note that +middlewares provided by ngRedux needs to be last ones. + +```JS +import reducers from './reducers'; +import { createStore, combineReducers } from 'redux'; +import thunk from 'redux-thunk'; +import ngRedux from 'ng-redux'; + +const reducer = combineReducers(reducers); + +angular.module('app', [ngRedux]) +.config(($ngReduxProvider) => { + $ngReduxProvider.createStore((middlewares, enhancers) => { + return createStore( + reducer, + {}, + compose(applyMiddleware(thunk, ...middlewares), ...enhancers) + ) + }); + }); +``` + #### Usage *Using controllerAs syntax* diff --git a/index.d.ts b/index.d.ts index 1ee24e0..fc735aa 100644 --- a/index.d.ts +++ b/index.d.ts @@ -109,6 +109,12 @@ declare namespace ngRedux { /* provider */ export interface INgReduxProvider { + /** + * callback for creating Redux store. + * + * @param storeCreator + */ + createStore(storeCreator: (middlewares?: (Middleware | string)[], storeEnhancers?: Function[]) => Store): void; /** * Creates Redux store. * diff --git a/src/components/ngRedux.js b/src/components/ngRedux.js index 9f02b47..1b17dde 100644 --- a/src/components/ngRedux.js +++ b/src/components/ngRedux.js @@ -23,6 +23,7 @@ export default function ngReduxProvider() { let _initialState = undefined; let _reducerIsObject = undefined; let _providedStore = undefined; + let _storeCreator = undefined; this.provideStore = (store, middlewares = [], storeEnhancers) => { _providedStore = store; @@ -31,6 +32,10 @@ export default function ngReduxProvider() { _middlewares = [...middlewares, providedStoreMiddleware(store)]; } + this.createStore = (storeCreator) => { + _storeCreator = storeCreator + }; + this.createStoreWith = (reducer, middlewares, storeEnhancers, initialState) => { invariant( isFunction(reducer) || isObject(reducer), @@ -90,11 +95,15 @@ export default function ngReduxProvider() { // digestMiddleware needs to be the last one. resolvedMiddleware.push(digestMiddleware($injector.get('$rootScope'), this.config.debounce)); - // combine middleware into a store enhancer. - const middlewares = applyMiddleware(...resolvedMiddleware); - - // compose enhancers with middleware and create store. - const store = createStore(_reducer, _initialState, compose(middlewares, ...resolvedStoreEnhancer)); + let store; + if(_storeCreator) { + store = _storeCreator(resolvedMiddleware, resolvedStoreEnhancer); + } else { + // combine middleware into a store enhancer. + const middlewares = applyMiddleware(...resolvedMiddleware); + // compose enhancers with middleware and create store. + store = createStore(_reducer, _initialState, compose(middlewares, ...resolvedStoreEnhancer)); + } const mergedStore = assign({}, store, { connect: Connector(store) });