yesmeck / mini-store

A minimal state store for React component.

mini-store

Deprecated, see use-context-selector for optimized state subscribtion

A state store for React component.

Motivation

When you want to share a component's state to another one, a commom pattern in React world is lifting state up. But one problem of this pattern is performance, assume we have a component in following hierarchy:

<Parent>
  <ChildA />
  <ChildB />
  <ChildC />
</Parent>

ChildA want to share state with ChildB, so you lifting ChildA's state up to Parent. Now, when ChildA's state changes, the whole Parent will rerender, includes ChildC which should not happen.

Redux do a good job at this situation throgh keeping all state in store, then component can subscribe state's changes, and only connected components will rerender. But redux + react-redux is overkill when you are writing a component library. So I wrote this little library, It's like Redux's store without "reducer" and "dispatch".

Example

See this demo online.

import { Provider, create, connect } from 'mini-store';

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.store = create({
      count: 0,
    });
  }

  render() {
    return (
      <Provider store={this.store}>
        <div>
          <Buttons />
          <Result />
        </div>
      </Provider>
    )
  }
}

@connect()
class Buttons extends React.Component {
  handleClick = (step) => () => {
    const { store } = this.props;
    const { count } = store.getState();
    store.setState({ count: count + step });
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick(1)}>+</button>
        <button onClick={this.handleClick(-1)}>-</button>
      </div>
    );
  }
}

@connect((state) => ({ count: state.count }))
class Result extends React.Component {
  render() {
    return (
      <div>{this.props.count}</div>
    );
  };
}

API

create(initialState)

Creates a store that holds the state. initialState is plain object.

<Provider store>

Makes the store available to the connect() calls in the component hierarchy below.

connect(mapStateToProps)

Connects a React component to the store. It works like Redux's connect, but only accept mapStateToProps. The connected component also receive store as a prop, you can call setState directly on store.

License

MIT

mini-store's Issues

use in function component

How to use in function component .
could you give some example.

Can support typescript?

Can support typescript?~

please upgrade 'hoist-non-react-statics'

i found u upgrade 'hoist-non-react-statics' in your code , but have not npm publish;
npm package now version 3.0.1 still "hoist-non-react-statics": "^2.3.1";
it makes some problem in my project

shouldn't publish .babelrc to npm

since you already pre-built your package, then .babelrc should not in npm registry. It will result top level node_modules maybe cannot found babel related packages, because babel-preset-env renamed to @babel/preset-env. pr #2

升级下hoist-non-react-statics ？

避免下游重复包

Remove prop-types