Skip to content

Commit 4b46050

Browse files
committed
Update README with new breaking changes
1 parent 08f6993 commit 4b46050

File tree

1 file changed

+12
-19
lines changed

1 file changed

+12
-19
lines changed

README.md

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,10 @@ Handle redux async actions using [Cycle.js](https://cycle.js.org/).
3030

3131
`npm install --save redux-cycles`
3232

33-
Then use `createCycleMiddleware()` which takes as first argument your `main` Cycle.js function, and second argument the Cycle.js drivers you want to use:
33+
Then use `createCycleMiddleware()` which returns the redux middleware function, but also has two function properties attached to it; namely `makeActionDriver()` and `makeStateDriver()` which you can use accordingly when you call `Cycle.run` (which can be installed via `npm i -s @cycle/xstream-run`).
3434

3535
```js
36+
import { run } from '@cycle/xstream-run';
3637
import { createCycleMiddleware } from 'redux-cycles';
3738

3839
function main(sources) {
@@ -45,17 +46,22 @@ function main(sources) {
4546
}
4647
}
4748

48-
const cycleMiddleware = createCycleMiddleware(main);
49+
const cycleMiddleware = createCycleMiddleware();
50+
const { makeActionDriver } = cycleMiddleware;
4951

5052
const store = createStore(
5153
rootReducer,
5254
applyMiddleware(cycleMiddleware)
5355
);
56+
57+
run(main, {
58+
ACTION: makeActionDriver()
59+
})
5460
```
5561

5662
## Example
5763

58-
Try out this [JS Bin](https://jsbin.com/govola/10/edit?js,output).
64+
Try out this [JS Bin](https://jsbin.com/bomugapuxi/2/edit?js,output).
5965

6066
See a real world example: [cycle autocomplete](https://github.com/cyclejs-community/redux-cycles/blob/master/example/cycle/index.js).
6167

@@ -242,8 +248,8 @@ This middleware intercepts Redux actions and allows us to handle them using Cycl
242248

243249
Redux-cycles ships with two drivers:
244250

245-
* `ACTION`, which is a read-write driver, allowing to react to actions that have just happened, as well as to dispatch new actions.
246-
* `STATE`, which is a read-only driver that streams the current redux state. It's a reactive counterpart of the `yield select(state => state)` effect in Redux-saga.
251+
* `makeActionDriver()`, which is a read-write driver, allowing to react to actions that have just happened, as well as to dispatch new actions.
252+
* `makeStateDriver()`, which is a read-only driver that streams the current redux state. It's a reactive counterpart of the `yield select(state => state)` effect in Redux-saga.
247253

248254
```javascript
249255
import sampleCombine from 'xstream/extra/sampleCombine'
@@ -263,21 +269,8 @@ function main(sources) {
263269
}
264270
```
265271

266-
Here's an example on [how the STATE driver works](https://jsbin.com/kijucaw/7/edit?js,output).
267-
268-
NOTE: If you want to use any other driver aside ACTION and STATE, make sure to have it installed and registered. You can do so at instantiation time, via the `createCycleMiddleware` API.
269-
For example, for the HTTP driver:
270-
271-
```bash
272-
npm install @cycle/http
273-
```
274-
275-
```javascript
276-
import { createCycleMiddleware } from 'redux-cycles';
277-
import { makeHTTPDriver } from '@cycle/http';
272+
Here's an example on [how the STATE driver works](https://jsbin.com/rohomaxuma/2/edit?js,output).
278273

279-
const cycleMiddleware = createCycleMiddleware(main, { HTTP: makeHTTPDriver() });
280-
```
281274
## Utils
282275

283276
### `combineCycles`

0 commit comments

Comments
 (0)