A ReactJS state provider and connector for xstream-store
npm install react-xstream-store


React components for connecting an xstream-store store to your components.
```
npm i react-xstream-store xstream-store xstream
react-xstream-store exports a Provider to make your xstream storecontext
available through , and exports a Consumer and withStream HOC to
access state in the store.
`javascript
// App.js
import React from 'react';
import {Provider} from 'react-xstream-store';
import store from './my-xstream-store';
import Counter from './Counter';
const App = () =>
`
| Prop | Description |
|-------|---------------------------------|
| store | An xstream-store store object |
A typical React context consumer that expects a function for children,dispatch
returning bound action creators, state, and from the store.
`javascript
// 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 = () =>
{({count, decrement, increment, dispatch}) =>
{count}
}
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. |
A higher-order component and alternative to the Consumer component for making
actions, state, and dispatch available within a component.
`javascript
// 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}) =>
const selector = state => {
return {count: state.count};
};
const actions = {
decrement: decrementAction,
increment: incrementAction,
}
export default withStream(selector, actions)(Counter);
``
- [ ] add examples
MIT