https://github.com/fixate/react-xstream-store
A ReactJS state provider and connector for xstream-store
https://github.com/fixate/react-xstream-store
Last synced: 2 months ago
JSON representation
A ReactJS state provider and connector for xstream-store
- Host: GitHub
- URL: https://github.com/fixate/react-xstream-store
- Owner: fixate
- License: mit
- Created: 2018-06-05T19:07:08.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-08-17T15:22:42.000Z (over 6 years ago)
- Last Synced: 2025-02-15T02:43:45.559Z (3 months ago)
- Language: TypeScript
- Size: 319 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-xstream-store
[](https://travis-ci.org/fixate/react-xstream-store)
[](https://badge.fury.io/js/react-xstream-store)
[](https://codecov.io/gh/fixate/react-xstream-store)
React components for connecting an [xstream-store](https://github.com/fixate/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
```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 |
### Consumer
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}) =>
-
{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. |
### withStream
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}) =>
-
{count}
+
const selector = state => {
return {count: state.count};
};
const actions = {
decrement: decrementAction,
increment: incrementAction,
}
export default withStream(selector, actions)(Counter);
```
## Todo
- [ ] add examples
## License
MIT