diff --git a/README.md b/README.md index 56b0d4e..7e62a07 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,6 @@ With an object: ```JS import reducers from './reducers'; -import { combineReducers } from 'redux'; import loggingMiddleware from './loggingMiddleware'; import ngRedux from 'ng-redux'; import reducer3 from './reducer3'; @@ -93,6 +92,22 @@ 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`: + +```JS +import reducers from './reducers'; +import { createStore, combineReducers } from 'redux'; +import ngRedux from 'ng-redux'; + +const reducer = combineReducers(reducers); +const store = createStore(reducer); + +angular.module('app', [ngRedux]) +.config(($ngReduxProvider) => { + $ngReduxProvider.provideStore(store); + }); +``` + #### Usage *Using controllerAs syntax* @@ -101,9 +116,9 @@ import * as CounterActions from '../actions/counter'; class CounterController { constructor($ngRedux, $scope) { - /* ngRedux will merge the requested state's slice and actions onto this, + /* ngRedux will merge the requested state's slice and actions onto this, you don't need to redefine them in your controller */ - + let unsubscribe = $ngRedux.connect(this.mapStateToThis, CounterActions)(this); $scope.$on('$destroy', unsubscribe); } @@ -133,7 +148,7 @@ class CounterController { Creates the Redux store, and allow `connect()` to access it. -#### Arguments: +#### Arguments: * `reducer` \(*Function*): A single reducer composed of all other reducers (create with redux.combineReducer) * [`middlewares`] \(*Function[]*): Optional, An array containing all the middleware that should be applied. Functions and strings are both valid members. String will be resolved via Angular, allowing you to use dependency injection in your middlewares. * [`storeEnhancers`] \(*Function[]*): Optional, this will be used to create the store, in most cases you don't need to pass anything, see [Store Enhancer official documentation.](https://github.com/reactjs/redux/blob/master/docs/Glossary.md#store-enhancer) @@ -152,7 +167,7 @@ Connects an Angular component to Redux. * `target` \(*Object* or *Function*): If passed an object, the results of `mapStateToTarget` and `mapDispatchToTarget` will be merged onto it. If passed a function, the function will receive the results of `mapStateToTarget` and `mapDispatchToTarget` as parameters. e.g: -```JS +```JS connect(this.mapState, this.mapDispatch)(this); //Or connect(this.mapState, this.mapDispatch)((selectedState, actions) => {/* ... */}); @@ -228,7 +243,7 @@ See [redux-ui-router](https://github.com/neilff/redux-ui-router) to make ng-redu See [ng-redux-router](https://github.com/amitport/ng-redux-router) to make ng-redux and angular-route work together. ## Using DevTools -There are two options for using Redux DevTools with your angular app. The first option is to use the [redux-devtools package] (https://www.npmjs.com/package/redux-devtools), +There are two options for using Redux DevTools with your angular app. The first option is to use the [redux-devtools package] (https://www.npmjs.com/package/redux-devtools), and the other option is to use the [Redux DevTools Extension] (https://github.com/zalmoxisus/redux-devtools-extension#usage). The Redux DevTools Extension does not require adding the react, react-redux, or redux-devtools packages to your project. @@ -249,14 +264,14 @@ angular.module('app', ['ngRedux']) , document.getElementById('devTools') ); - + //To reflect state changes when disabling/enabling actions via the monitor //there is probably a smarter way to achieve that $ngRedux.subscribe(() => { $timeout(() => {$rootScope.$apply(() => {})}, 100); }); }); - + class App extends Component { render() { return ( @@ -286,7 +301,7 @@ angular.module('app', ['ngRedux']) .config(($ngReduxProvider) => { $ngReduxProvider.createStoreWith(rootReducer, [thunk], [window.__REDUX_DEVTOOLS_EXTENSION__()]); }) - .run(($ngRedux, $rootScope, $timeout) => { + .run(($ngRedux, $rootScope, $timeout) => { //To reflect state changes when disabling/enabling actions via the monitor //there is probably a smarter way to achieve that $ngRedux.subscribe(() => {