diff --git a/README.md b/README.md index 7fff021..d8ac824 100644 --- a/README.md +++ b/README.md @@ -41,6 +41,10 @@ Add the following script tag to your html: #### Initialization +You can initialize ngRedux two ways: + +Function as the reducer argument for the `createStoreWith`: + ```JS import reducers from './reducers'; import { combineReducers } from 'redux'; @@ -54,6 +58,27 @@ angular.module('app', [ngRedux]) }); ``` +A reducer object as reducer argument for the `createStoreWith`: + +```JS +import reducers from './reducers'; +import { combineReducers } from 'redux'; +import loggingMiddleware from './loggingMiddleware'; +import ngRedux from 'ng-redux'; + +angular.module('app', [ngRedux]) +.config(($ngReduxProvider) => { + reducer3 = functtion(state, action){} + $ngReduxProvider.createStoreWith({ + reducer1: "reducer1", + reducer2: function(state, action){}, + reducer3: reducer3 + }, ['promiseMiddleware', loggingMiddleware]); + }); +``` + +The object can be constructed either by passing a function as value or a string representing the reducer. This way, you can create reducers as services and initialze them inside the `.config`. Behind the secnes, ngRedux will `$injector.get` the string you pass as the value for the ojects of reducers and initilaze it. + #### Usage *Using controllerAs syntax* diff --git a/src/components/ngRedux.js b/src/components/ngRedux.js index 314a9c0..4801f91 100644 --- a/src/components/ngRedux.js +++ b/src/components/ngRedux.js @@ -1,22 +1,24 @@ import Connector from './connector'; import invariant from 'invariant'; -import {createStore, applyMiddleware, compose} from 'redux'; +import {createStore, applyMiddleware, compose, combineReducers} from 'redux'; import digestMiddleware from './digestMiddleware'; import assign from 'lodash.assign'; import isArray from 'lodash.isarray'; import isFunction from 'lodash.isfunction'; +import isObject from 'lodash.isobject'; export default function ngReduxProvider() { let _reducer = undefined; let _middlewares = undefined; let _storeEnhancers = undefined; let _initialState = undefined; + let _reducerIsObject = undefined; this.createStoreWith = (reducer, middlewares, storeEnhancers, initialState) => { invariant( - isFunction(reducer), - 'The reducer parameter passed to createStoreWith must be a Function. Instead received %s.', + isFunction(reducer) || isObject(reducer), + 'The reducer parameter passed to createStoreWith must be a Function or an Object. Instead received %s.', typeof reducer ); @@ -27,6 +29,7 @@ export default function ngReduxProvider() { ); _reducer = reducer; + _reducerIsObject = isObject(reducer); _storeEnhancers = storeEnhancers _middlewares = middlewares || []; _initialState = initialState; @@ -43,6 +46,21 @@ export default function ngReduxProvider() { } } + if(_reducerIsObject) { + let reducersObj = {}; + let reducKeys = Object.keys(_reducer); + + reducKeys.forEach((key) => { + if(typeof _reducer[key] === 'string') { + reducersObj[key] = $injector.get(_reducer[key]); + } else { + reducersObj[key] = _reducer[key]; + } + }); + + _reducer = combineReducers(reducersObj); + } + let finalCreateStore = _storeEnhancers ? compose(..._storeEnhancers)(createStore) : createStore; //digestMiddleware needs to be the last one.