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

Example

Online Demo

Support

Support React >= 16.3.0, if use React < 16.3.0 please add React.createContext polyfill. See create-react-context.