Skip to content

feat(chore): document provide store functionality #205

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 31, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 24 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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*
Expand All @@ -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);
}
Expand Down Expand Up @@ -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)
Expand All @@ -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) => {/* ... */});
Expand Down Expand Up @@ -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.

Expand All @@ -249,14 +264,14 @@ angular.module('app', ['ngRedux'])
<App store={ $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 (
Expand Down Expand Up @@ -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(() => {
Expand Down