https://github.com/nuintun/rc-flex-store
A flexible state store for React component.
https://github.com/nuintun/rc-flex-store
react redux store
Last synced: 4 months ago
JSON representation
A flexible state store for React component.
- Host: GitHub
- URL: https://github.com/nuintun/rc-flex-store
- Owner: nuintun
- License: mit
- Created: 2018-06-13T14:32:38.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-06-17T18:23:26.000Z (almost 5 years ago)
- Last Synced: 2025-08-09T14:17:00.923Z (10 months ago)
- Topics: react, redux, store
- Language: TypeScript
- Size: 80.1 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rc-flex-store
> A flexible state store for React component.
>
> [![NPM Version][npm-image]][npm-url]
> [![Dependencies][david-image]][david-url]
> [![DevDependencies][dev-david-image]][dev-david-url]
### 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
```jsx
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
{count} ;
}
}
@connect(
counter,
({ decrement, increment }) => ({ decrement, increment })
)
class CounterAction extends React.PureComponent {
render() {
const { decrement, increment } = this.props;
return (
-
+
);
}
}
@mount(counter)
class Counter extends React.Component {
render() {
return (
);
}
}
ReactDOM.render(, document.getElementById('app'));
```
### Example
> [Online Demo](https://codesandbox.io/s/p3jrym1opx)
### Support
> Support `React >= 16.3.0`, if use `React < 16.3.0` please add `React.createContext` polyfill. See [create-react-context](https://github.com/jamiebuilds/create-react-context).
[npm-image]: https://img.shields.io/npm/v/rc-flex-store.svg?style=flat-square
[npm-url]: https://www.npmjs.org/package/rc-flex-store
[david-image]: http://img.shields.io/david/nuintun/rc-flex-store.svg?style=flat-square
[david-url]: https://david-dm.org/nuintun/rc-flex-store
[dev-david-image]: http://img.shields.io/david/dev/nuintun/rc-flex-store.svg?style=flat-square
[dev-david-url]: https://david-dm.org/nuintun/rc-flex-store?type=dev