react-xstream-store
v3.0.1
Published
A ReactJS state provider and connector for xstream-store
Downloads
14
Readme
react-xstream-store
React components for connecting an xstream-store store to your components.
Installation
npm i react-xstream-store xstream-store xstream
Usage
react-xstream-store
exports a Provider
to make your xstream
store
available through context
, and exports a Consumer
and withStream
HOC to
access state in the store.
Provider
// App.js
import React from 'react';
import {Provider} from 'react-xstream-store';
import store from './my-xstream-store';
import Counter from './Counter';
const App = () =>
<Provider store={store}>
<Counter />
</Provider>
| Prop | Description |
|-------|---------------------------------|
| store | An xstream-store
store object |
Consumer
A typical React context consumer that expects a function for children
,
returning bound action creators, state, and dispatch
from the store.
// Counter.js
import React from 'react';
import {Consumer} from 'react-xstream-store'
import {decrementAction, incrementAction} from './my-counter-stream';
const selector = state => {
return {count: state.count};
};
const actionMap = {
decrement: decrementAction,
increment: incrementAction,
}
const Counter = () =>
<Consumer selector={selector} actions={actions}>
{({count, decrement, increment, dispatch}) =>
<div>
<button onClick={decrement}>-</button>
{count}
<button onClick={decrement}>+</button>
</div>
}
</Consumer>
export default Counter;
| Prop | Type | Description |
|----------|------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| selector | fn: (state) => state | A function that receives the entire store's state. This is a good place to select only the state from the store your component requires. |
| actions | obj: {key: actionCreator | action} | An object mapping keys to action creators. Action creators (functions which return actions) are automatically bound to xstream-store
's dispatch. |
withStream
A higher-order component and alternative to the Consumer
component for making
actions, state, and dispatch available within a component.
// Counter.js
import React from 'react';
import {withProps} from 'react-xstream-store'
import {decrementAction, incrementAction} from './my-counter-stream';
const Counter = ({count, decrement, increment, dispatch}) =>
<div>
<button onClick={decrement}>-</button>
{count}
<button onClick={decrement}>+</button>
</div>
const selector = state => {
return {count: state.count};
};
const actions = {
decrement: decrementAction,
increment: incrementAction,
}
export default withStream(selector, actions)(Counter);
Todo
- [ ] add examples
License
MIT