https://github.com/mmmurray/react-super-state
A state management library using hooks 🎣
https://github.com/mmmurray/react-super-state
react react-hooks reducer state state-management typescript
Last synced: 7 months ago
JSON representation
A state management library using hooks 🎣
- Host: GitHub
- URL: https://github.com/mmmurray/react-super-state
- Owner: mmmurray
- License: mit
- Created: 2018-11-25T16:35:32.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-10-01T10:49:35.000Z (about 6 years ago)
- Last Synced: 2024-12-06T22:42:30.349Z (10 months ago)
- Topics: react, react-hooks, reducer, state, state-management, typescript
- Language: TypeScript
- Homepage:
- Size: 229 KB
- Stars: 5
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Super State
[](https://travis-ci.org/mmmurray/react-super-state)
[](https://www.npmjs.com/package/react-super-state)
A state management library using hooks.
## Usage
[](https://codesandbox.io/s/01lyjy810p)
`state.js`
```js
import React from 'react'
import createSuperState from 'react-super-state'
const initialState = {
value: 0,
}
const reducers = {
add: (state, payload) => ({
...state,
value: state.value + payload.amount,
}),
}
export const { useSuperState, Provider } = createSuperState(
reducers,
initialState,
)
```
`display.js`
```js
import { useSuperState } from './state'
const Display = () => {
const { state } = useSuperState()
return Value is: {state.value}
}
export default Display
```
`add.js`
```js
import React from 'react'
import { useSuperState } from './state'
const Add = ({ amount }) => {
const { actions } = useSuperState()
return actions.add({ amount })}>Add {amount}
}
export default Add
```
`index.js`
```js
import React from 'react'
import { render } from 'react-dom'
import { Provider } from './state'
import Add from './add'
import Display from './display'
const App = () => (
)
render(, document.getElementById('root'))
```
To create a new state provider and custom hook, call `createSuperState` giving it a map of reducer functions and the initial state. A reducer function is passed two arguments, the first is the current state, and the second is a payload object which should contain enough information to transform the current state into a new state. Each reducer function should return an entirely new state object which will replace the previous state.
The object returned from `createSuperState` contains a `Provider` and a `useSuperState` custom hook. Any component that uses `useSuperState` must at some level be rendered inside of the `Provider` component. The `useSuperState` hook also returns an object with two properties. One is `state` which holds the current state and the other is `actions` which is a map of functions for updating the state. There is one action per reducer and each action takes one argument which is the payload for that reducer.
## Best Practices
- Create a singleton module that exports the result of calling `createSuperState` so that it can be imported anywhere in the codebase.
- It is strongly advised to avoid mutating the state object that is passed to the reducer functions and returned from `useSuperState`.
## TypeScript
[](https://codesandbox.io/s/5v7q7zvzvl)
React Super State includes full TypeScript definitions. Type information is infered from the initial state object and the reducer function arguments so that the `state` and `actions` objects returned from `useSuperState` are fully typed to provide an fully type safe API.
In addition TypeScript will return a read only state from `useSuperState` to prevent accidental mutation.