Skip to content

Commit 0e389bb

Browse files
author
Péter Hauszknecht
committed
update README
1 parent d0715f0 commit 0e389bb

1 file changed

Lines changed: 17 additions & 13 deletions

File tree

README.md

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -7,18 +7,18 @@
77
The simplest way to keep immutable action controlled dataflow is dispatching pure functions (as reducers) to the store.
88

99
```javascript
10-
dispatch(state => ({ ...state, isFetching: true }));
10+
store.dispatch(state => ({ ...state, counter: state.counter + 1 }));
1111
```
1212

13-
In this terminology action is a function that returns a reducer.
13+
**In this terminology action is a function that returns a reducer:**
1414

1515
```javascript
16-
const selectUser = userId => state => ({
16+
const increment = amount => state => ({
1717
...state,
18-
selectedUser: userId
18+
counter: state.counter + amount
1919
});
2020

21-
dispatch(selectUser(123));
21+
store.dispatch(increment(42));
2222
```
2323

2424
## Installation
@@ -37,7 +37,7 @@ npm install repatch
3737
```javascript
3838
import Store from 'repatch';
3939

40-
const store = new Store(<initialState>);
40+
const store = new Store(initialState);
4141
```
4242

4343
In CommonJS format you should use:
@@ -58,18 +58,22 @@ unsubscribe();
5858

5959
## Sub-reducers
6060

61-
We do not need to reduce always the whole state of the store. A good practice to avoid this effort is using sub-reducers.
61+
We do not need to reduce always the whole state of the store. Repatch also offers a way to combine sub-reducers, those describe a deeply nested property in the state. We just define a function that takes a nested reducer as argument, and returns a reducer that reduces the whole state:
6262

6363
```javascript
64-
const reduceFoo = reducer => state => ({
64+
const reduceFoo = fooReducer => state => ({
6565
...state,
6666
bar: {
6767
...state.bar,
68-
foo: reducer(state.bar.foo)
68+
foo: fooReducer(state.bar.foo)
6969
}
7070
});
71+
```
72+
73+
Using that we can define easily an action, that sets an `x` property in the `foo` object:
7174

72-
const fooAction = payload => reduceFoo(state => ({ ...state, ...payload }));
75+
```javascript
76+
const setX = x => reduceFoo(state => ({ ...state, x }));
7377
```
7478

7579
## Middlewares
@@ -83,7 +87,7 @@ A repatch middleware takes the store instance and the previous reducer and retur
8387
Use `addMiddleware` method to chaining middlewares:
8488

8589
```javascript
86-
const store = new Store(<initialState>)
90+
const store = new Store(initialState)
8791
.addMiddleware(mw1)
8892
.addMiddleware(mw2, mw3);
8993
```
@@ -95,7 +99,7 @@ The `thunk` middleware is useful for handling async actions similar to [redux-th
9599
```javascript
96100
import Store, { thunk } from 'repatch';
97101

98-
const store = new Store(<initialState>).addMiddleware(thunk);
102+
const store = new Store(initialState).addMiddleware(thunk);
99103
```
100104

101105
In thunk async actions reducer returns a function (*delegate*):
@@ -127,7 +131,7 @@ import Store, { thunk } from 'repatch';
127131
import api from './api';
128132
import hashHistory from 'react-router';
129133

130-
const store = new Store(<initialState>)
134+
const store = new Store(initialState)
131135
.addMiddleware(thunk.withExtraArgument({ api, hashHistory }));
132136
```
133137

0 commit comments

Comments
 (0)