❤
npm
Sign UpSign In

react-xstream-store
TypeScript icon, indicating that this package has built-in type declarations

3.0.1 • Public • Published

react-xstream-store

Build Status npm version codecov

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

Readme

Keywords

Package Sidebar

Install

npm i react-xstream-store

Repository

github.com/fixate/react-xstream-store

Homepage

github.com/fixate/react-xstream-store#readme

Weekly Downloads

13

Version

3.0.1

License

MIT

Unpacked Size

31.4 kB

Total Files

9

Last publish

Collaborators

  • larrybotha
Try on RunKit
Report malware