https://github.com/lucifier129/create-react-store
Create reactive stores for React App
https://github.com/lucifier129/create-react-store
react react-hooks state-management
Last synced: about 1 year ago
JSON representation
Create reactive stores for React App
- Host: GitHub
- URL: https://github.com/lucifier129/create-react-store
- Owner: Lucifier129
- License: mit
- Created: 2019-11-27T03:07:04.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-11-28T09:31:10.000Z (over 6 years ago)
- Last Synced: 2025-04-08T14:52:28.850Z (about 1 year ago)
- Topics: react, react-hooks, state-management
- Language: TypeScript
- Homepage: https://lucifier129.github.io/create-react-store-todo-app/build/
- Size: 8.79 KB
- Stars: 10
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# create-react-store
Create a reactive store for React App
Make developing React App easier and happier!
Demo: [create-react-store-todo-app](https://github.com/Lucifier129/create-react-store-todo-app)
## Installation
```shell
npm install --save create-react-store
```
## Usage
```javascript
import {
isReactive,
useAction,
createStore,
useReactive,
useComputed,
useBinding,
CreateStoreOptions,
Store,
mutate,
remove,
Provider,
enableTracing,
disableTracing
} from 'create-react-store'
```
create-react-store uses `bistate`, See [bistate docs](https://github.com/Lucifier129/bistate#caveats) for more information
```javascript
import { createStore, useAction } from 'create-react-store'
// pass initialData
const store = createStore([])
const App: React.FC = () => {
// read data from store.useData()
let todos = store.useData()
let handleAddTodo = useAction(text => {
// mutate data inside action
todos.push({
id: Math.random(),
text
})
})
return (
<>
{todos.map(todo => (
))}
>
)
}
ReactDOM.render(
,
container
)
```
## API
### createStore(initialData) -> { useData, useCreate, Provider }
createStore receives object as initialState, return { useData, useCreate, Provider }
- useData() -> data
- a react-hooks use in function-component to read store data
- useCreate(data) -> store
- a react-hooks use in function-component to re-create a store with data
- Provider({ initialData: object})
- Provider is a React Component to provide data for sub-components
### Provider({ stores: Store[] })
a React Component recieves stores to provide data for sub-components.
### useAction(f) -> f
useAction is a react-hooks use in function-component, it will return a wrapped function has the same type sinature
It's safely to mutate objects in useAction(f), `bistate` will take care the immutable and re-render component
### useReactive(object) -> object
useReactive is a react-hooks use in function-component, it will return a reactive one has the same structure/data
The data returned by useReactive, can be mutated via useAction
### isReactive(object) -> boolean
check whether object is reactive or not
### enableTracing()
enable tracing actions and show logs in console
### disableTracing()
disable tracing actions
### [useComputed](https://github.com/Lucifier129/bistate#usecomputedobj-deps---obj)
### [useBinding](https://github.com/Lucifier129/bistate#usebindingbistate---obj)
### [remove](https://github.com/Lucifier129/bistate#removebistate---void)
### [mutate](https://github.com/Lucifier129/bistate#mutatef---value_returned_by_f)
## PR is Welcome:)