https://github.com/twocatmoon/react-actions
A dead-simple and boiler-plate free state management strategy for React.
https://github.com/twocatmoon/react-actions
react react-hooks react-state-management redux state-management store
Last synced: 9 months ago
JSON representation
A dead-simple and boiler-plate free state management strategy for React.
- Host: GitHub
- URL: https://github.com/twocatmoon/react-actions
- Owner: twocatmoon
- License: mit
- Created: 2022-04-07T21:06:25.000Z (almost 4 years ago)
- Default Branch: trunk
- Last Pushed: 2024-04-23T14:54:49.000Z (over 1 year ago)
- Last Synced: 2025-03-23T07:13:09.860Z (10 months ago)
- Topics: react, react-hooks, react-state-management, redux, state-management, store
- Language: TypeScript
- Homepage:
- Size: 314 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[![Contributors][contributors-shield]][contributors-url]
[![Forks][forks-shield]][forks-url]
[![Stargazers][stars-shield]][stars-url]
[![Issues][issues-shield]][issues-url]
[![MIT License][license-shield]][license-url]
React Actions
A dead-simple and boiler-plate free state management strategy for React.
Explore the docs »
Report Bug
·
Request Feature
Table of Contents
## About The Project
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:
```tsx
// store.ts
type State = {
counter: number
}
const initialState = {
counter: 0
}
export const actions = {
incrementCounter: action((prevState, amount) => {
return {
...prevState,
counter: prevState.counter + amount
}
})
}
const options: CreateStoreOptions = {
storageKey: 'myStore',
storageType: 'local'
}
export const { Provider, useStore } = createStoreContext(initialState, actions, options)
// App.tsx
import { Provider, useStore, actions } from './store.ts'
function Consumer () {
const [ state, dispatch, _execute, clearStorage ] = useStore()
return (
Counter: {state.counter}
dispatch(actions.incrementCounter(2))}>
Increment Counter by 2
clearStorage()}>Clear Local Storage
)
}
function App () {
return (
)
}
```
Example using an event bus:
```tsx
// store.ts
type State = {
counter: number
}
const initialState = {
counter: 0
}
export const actions = {
incrementCounter: action((prevState, amount) => {
return {
...prevState,
counter: prevState.counter + amount
}
})
}
const options: CreateStoreOptions = {
storageKey: 'myStore',
storageType: 'local'
}
export const { useStore } = createStoreEventBus(initialState, actions, options)
// App.tsx
import { useStore, actions } from './store.ts'
function App () {
const [ state, dispatch, _execute, clearStorage ] = useStore()
return (
Counter: {state.counter}
dispatch(actions.incrementCounter(2))}>
Increment Counter by 2
clearStorage()}>Clear Local Storage
)
}
export default App
```
Example using asynchronous Action Sets:
```tsx
// store.ts
const { useStore } = createStoreEventBus(initialState, actions, options)
const { useStore } = createStoreEventBus(initialState, actions, options)
// Component.tsx
function Component () {
const [ state, dispatch, execute ] = useStore()
execute(actionSets.fetchCounterData(2))
...
}
```
Example with Server Side Rendering (SSR) support:
```tsx
const options: CreateStoreOptions = {
ssr: true
}
```
For a list of all the options that can be passed into `createStoreContext` and `createStoreEventBus`, please see the [documentation](https://twocatmoon.github.io/react-actions/modules.html#CreateStoreOptions).
### Built With
* [React.js](https://reactjs.org/)
* [TypeScript](https://www.typescriptlang.org/)
* [Vite](https://vitejs.dev/)
* [TypeDoc](https://typedoc.org/)
## Installation
1. Install from NPM
```sh
npm i @twocatmoon/react-actions
```
2. Include in your project
```ts
import { action, createStoreContext } from '@twocatmoon/react-actions'
- or -
import { action, createStoreEventBus } from '@twocatmoon/react-actions'
```
## Usage
_Please refer to the [Documentation](https://twocatmoon.github.io/react-actions)_
## Contributing
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!
1. Fork the Project
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
4. Push to the Branch (`git push origin feature/AmazingFeature`)
5. Open a Pull Request
## License
Distributed under the MIT License. See `LICENSE` for more information.
## Contact
Twitter - [@twocatmoon](https://twitter.com/twocatmoon)
Project Link - [https://github.com/twocatmoon/react-actions](https://github.com/twocatmoon/react-actions)
## Acknowledgments
* [Best-README-Template](https://github.com/othneildrew/Best-README-Template)
[contributors-shield]: https://img.shields.io/github/contributors/twocatmoon/react-actions.svg?style=for-the-badge
[contributors-url]: https://github.com/twocatmoon/react-actions/graphs/contributors
[forks-shield]: https://img.shields.io/github/forks/twocatmoon/react-actions.svg?style=for-the-badge
[forks-url]: https://github.com/twocatmoon/react-actions/network/members
[stars-shield]: https://img.shields.io/github/stars/twocatmoon/react-actions.svg?style=for-the-badge
[stars-url]: https://github.com/twocatmoon/react-actions/stargazers
[issues-shield]: https://img.shields.io/github/issues/twocatmoon/react-actions.svg?style=for-the-badge
[issues-url]: https://github.com/twocatmoon/react-actions/issues
[license-shield]: https://img.shields.io/github/license/twocatmoon/react-actions.svg?style=for-the-badge
[license-url]: https://github.com/twocatmoon/react-actions/blob/trunk/LICENSE