Rc-flex-store NPM

rc-flex-store

A flexible state store for React component.

API

create(initialState: React.ComponentState, updaters?: { updater: string: any }, name?: string): Store;
Create a store.
mount(store: Store, mapStoreToProps?: (store: UserStore, state: StoreState, props: Props) => Props, forwardRef?: boolean): React.Component
Mount a store provider to react component.
connect(store: Store, mapStoreToProps?: (store: UserStore, state: StoreState, props: Props) => Props;, forwardRef?: boolean): React.Component
Connect react component to a store consumer.

Usage

import ReactDOM from 'react-dom';
import React, { Fragment } from 'react';
import { create, mount, connect } from 'rc-flex-store';

const counter = create(
  {
    count: 0
  },
  {
    increment() {
      this.setState({ count: this.state.count + 1 });
    },
    decrement() {
      this.setState({ count: this.state.count - 1 });
    }
  },
  'counter'
);

@connect(
  counter,
  (store, { count }) => ({ count })
)
class CounterView extends React.PureComponent {
  render() {
    const { count } = this.props;

    return <div> {count} </div>;
  }
}

@connect(
  counter,
  ({ decrement, increment }) => ({ decrement, increment })
)
class CounterAction extends React.PureComponent {
  render() {
    const { decrement, increment } = this.props;

    return (
      <div>
        <button onClick={decrement}>-</button>
        <button onClick={increment}>+</button>
      </div>
    );
  }
}

@mount(counter)
class Counter extends React.Component {
  render() {
    return (
      <Fragment>
        <CounterView />
        <CounterAction />
      </Fragment>
    );
  }
}

ReactDOM.render(<Counter />, document.getElementById('app'));