https://github.com/vineyardbovines/yarsc
yet another react state container
https://github.com/vineyardbovines/yarsc
react react-hooks react-state-management
Last synced: 7 months ago
JSON representation
yet another react state container
- Host: GitHub
- URL: https://github.com/vineyardbovines/yarsc
- Owner: vineyardbovines
- License: mit
- Created: 2019-11-08T21:48:45.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-12-15T11:41:34.000Z (almost 2 years ago)
- Last Synced: 2024-11-17T21:29:15.360Z (11 months ago)
- Topics: react, react-hooks, react-state-management
- Language: JavaScript
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# yarsc
yet another react state container. now in 65 lines or less!
## usage
```
yarn add yarsc
```
YARSC is a state container built in only React APIs. It's been done a million times but whatever.
This state container provides out of the box support for thunks and has a very minimal logger when you're in dev mode (web or native).
Use `` to initialize the state context. Pass it a root reducer and an initial state and you're good to know.
You can use the `useStateContext()` helper to grab `state` and `dispatch`.
## full example
```jsx
import React from 'react'
import Provider, { useStateContext } from 'yarsc'
import nhlApi from '@nhl-api/client'
const teamsAction = () => async dispatch => {
try {
const response = await nhlApi.getTeams().then(data => dispatch({ type: "TEAMS", payload: data }))
return Promise.resolve(response)
} catch (err) {
console.error(err)
}
}
const teamsState = {
teams: []
}
function teamsReducer = (state = teamsState, action) => {
switch (action.type) {
case "TEAMS":
return {
...state,
teams: action.payload
}
default:
return state
}
}
const fooAction = () => ({
type: "FOO",
payload: 2
})
const fooState = {
foo: 1
}
function fooReducer = (state = fooState, action) => {
switch (action.types) {
case "FOO":
return {
..state,
foo: action.payload
}
default:
return state
}
}
const rootReducer = ({ teamsState, fooState }, action) => ({
teams: teamsReducer(teamsState, action),
foo: fooReducer(fooState, action)
})
const initialState = {
teams: teamsState,
foo: fooState
}
const App = () => {
const { state, dispatch } = useSessionContext()
React.useEffect(() => {
dispatch(teamsAction())
}, [])
return (
{state.foo}
-
{state.teams ? state.teams.map(team => team.name)} : null}
)
}
const Root = () => (
)
```
---
built with [skeletor](https://github.com/gretzky/skeletor) 💀