RxJS + ReactJS
The basic implementation of rx-react-store is simple. However, to make the most of it, it's recommended to have basic knowledge on:
Flux
RxJs
Installation
Data flow
1. You call store.dispatch(reducer, ...rest)
store.dispatch(reducer, ...rest)
A reducer
is a pure function . It only computes the next state. It should be completely predictable: calling it with the same inputs many times should produce the same outputs. It shouldn't perform any side effects like API calls or router transitions. These should happen before an action is dispatched.
You can call store.dispatch(reducer, ...rest) from anywhere in your app, including components and XHR callbacks, or even at scheduled intervals.
2. The store calls the reducer
function you gave it
reducer
function you gave itThe store will pass n
arguments to the reducer: the first is the current state, rest of arguments are passing with ...rest
. For example :
3. The store save the new state given by reducer
reducer
Every connected registered with store.connect()(component)
will now be rerender.
Because
component.setState
is async, thestore.dispatch
is also async by nature.
Basic starting guide
Store
app.store.js
Reducers
app.reducers.js
Dispatchers
app.dispatchers.js
Connected Component (aka Container Component)
App.container.jsx
AnOther.jsx
Each time the input will be blurred, App.container.jsx will rerender with the new value of the title input
. Throttle implemntation is up to you.
Last updated