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.

$3

`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 |

$3

A typical React context consumer that expects a function for children,
returning bound action creators, state, and dispatch 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}) =>


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. |

$3

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);
``

Todo

- [ ] add examples

License

MIT