A dead-simple and boiler-plate free state management strategy for React.
Explore the docs »
Report Bug
·
Request Feature
State management in React doesn't need to be complicated. Built using the Context API and useReducer hook, React Actions provides a straight-forward pattern for designing, manipulating, and caching state across your application.
Example using React's Context API:
// store.ts
type State = {
counter: number
}
const initialState = {
counter: 0
}
export const actions = {
incrementCounter: action<State, number>((prevState, amount) => {
return {
...prevState,
counter: prevState.counter + amount
}
})
}
const options: CreateStoreOptions = {
storageKey: 'myStore',
storageType: 'local'
}
export const { Provider, useStore } = createStoreContext<State>(initialState, actions, options)
// App.tsx
import { Provider, useStore, actions } from './store.ts'
function Consumer () {
const [ state, dispatch, _execute, clearStorage ] = useStore()
return (
<div>
<p>Counter: <code>{state.counter}</code></p>
<p>
<button onClick={() => dispatch(actions.incrementCounter(2))}>
Increment Counter by 2
</button>
</p>
<p>
<button onClick={() => clearStorage()}>Clear Local Storage</button>
</p>
</div>
)
}
function App () {
return (
<Provider>
<Consumer />
</Provider>
)
}
Example using an event bus:
// store.ts
type State = {
counter: number
}
const initialState = {
counter: 0
}
export const actions = {
incrementCounter: action<State, number>((prevState, amount) => {
return {
...prevState,
counter: prevState.counter + amount
}
})
}
const options: CreateStoreOptions = {
storageKey: 'myStore',
storageType: 'local'
}
export const { useStore } = createStoreEventBus<State>(initialState, actions, options)
// App.tsx
import { useStore, actions } from './store.ts'
function App () {
const [ state, dispatch, _execute, clearStorage ] = useStore()
return (
<div>
<p>Counter: <code>{state.counter}</code></p>
<p>
<button onClick={() => dispatch(actions.incrementCounter(2))}>
Increment Counter by 2
</button>
</p>
<p>
<button onClick={() => clearStorage()}>Clear Local Storage</button>
</p>
</div>
)
}
export default App
Example using asynchronous Action Sets:
// store.ts
const { useStore } = createStoreEventBus<State>(initialState, actions, options)
const { useStore } = createStoreEventBus<State>(initialState, actions, options)
// Component.tsx
function Component () {
const [ state, dispatch, execute ] = useStore()
execute(actionSets.fetchCounterData(2))
...
}
Example with Server Side Rendering (SSR) support:
const options: CreateStoreOptions = {
ssr: true
}
For a list of all the options that can be passed into createStoreContext
and createStoreEventBus
, please see the documentation.
npm i @twocatmoon/react-actions
import { action, createStoreContext } from '@twocatmoon/react-actions'
- or -
import { action, createStoreEventBus } from '@twocatmoon/react-actions'
Please refer to the Documentation
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)Distributed under the MIT License. See LICENSE
for more information.
Twitter - @twocatmoon
Project Link - https://github.com/twocatmoon/react-actions
Generated using TypeDoc