Skip to content

Commit 0b3ff32

Browse files
committed
feat(chore): document provide store functionality
Add documentation to use providestore
1 parent a61aa9b commit 0b3ff32

File tree

1 file changed

+24
-9
lines changed

1 file changed

+24
-9
lines changed

Diff for: README.md

+24-9
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,6 @@ With an object:
7676

7777
```JS
7878
import reducers from './reducers';
79-
import { combineReducers } from 'redux';
8079
import loggingMiddleware from './loggingMiddleware';
8180
import ngRedux from 'ng-redux';
8281
import reducer3 from './reducer3';
@@ -93,6 +92,22 @@ angular.module('app', [ngRedux])
9392
```
9493
In this example `reducer1` will be resolved using angular's DI after the config phase.
9594

95+
Alternatively, you can pass an already existing store to ngRedux using `provideStore`:
96+
97+
```JS
98+
import reducers from './reducers';
99+
import { createStore, combineReducers } from 'redux';
100+
import ngRedux from 'ng-redux';
101+
102+
const reducer = combineReducers(reducers);
103+
const store = createStore(reducer);
104+
105+
angular.module('app', [ngRedux])
106+
.config(($ngReduxProvider) => {
107+
$ngReduxProvider.provideStore(store);
108+
});
109+
```
110+
96111
#### Usage
97112

98113
*Using controllerAs syntax*
@@ -101,9 +116,9 @@ import * as CounterActions from '../actions/counter';
101116

102117
class CounterController {
103118
constructor($ngRedux, $scope) {
104-
/* ngRedux will merge the requested state's slice and actions onto this,
119+
/* ngRedux will merge the requested state's slice and actions onto this,
105120
you don't need to redefine them in your controller */
106-
121+
107122
let unsubscribe = $ngRedux.connect(this.mapStateToThis, CounterActions)(this);
108123
$scope.$on('$destroy', unsubscribe);
109124
}
@@ -133,7 +148,7 @@ class CounterController {
133148

134149
Creates the Redux store, and allow `connect()` to access it.
135150

136-
#### Arguments:
151+
#### Arguments:
137152
* `reducer` \(*Function*): A single reducer composed of all other reducers (create with redux.combineReducer)
138153
* [`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.
139154
* [`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.
152167
* `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.
153168

154169
e.g:
155-
```JS
170+
```JS
156171
connect(this.mapState, this.mapDispatch)(this);
157172
//Or
158173
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
228243
See [ng-redux-router](https://github.com/amitport/ng-redux-router) to make ng-redux and angular-route work together.
229244

230245
## Using DevTools
231-
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),
246+
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),
232247
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
233248
require adding the react, react-redux, or redux-devtools packages to your project.
234249

@@ -249,14 +264,14 @@ angular.module('app', ['ngRedux'])
249264
<App store={ $ngRedux }/>,
250265
document.getElementById('devTools')
251266
);
252-
267+
253268
//To reflect state changes when disabling/enabling actions via the monitor
254269
//there is probably a smarter way to achieve that
255270
$ngRedux.subscribe(() => {
256271
$timeout(() => {$rootScope.$apply(() => {})}, 100);
257272
});
258273
});
259-
274+
260275
class App extends Component {
261276
render() {
262277
return (
@@ -286,7 +301,7 @@ angular.module('app', ['ngRedux'])
286301
.config(($ngReduxProvider) => {
287302
$ngReduxProvider.createStoreWith(rootReducer, [thunk], [window.__REDUX_DEVTOOLS_EXTENSION__()]);
288303
})
289-
.run(($ngRedux, $rootScope, $timeout) => {
304+
.run(($ngRedux, $rootScope, $timeout) => {
290305
//To reflect state changes when disabling/enabling actions via the monitor
291306
//there is probably a smarter way to achieve that
292307
$ngRedux.subscribe(() => {

0 commit comments

Comments
 (0)