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:

// 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.

Built With

• React.js
• TypeScript
• Vite
• TypeDoc

Installation

1. Install from NPM

   npm i @twocatmoon/react-actions

2. Include in your project

   import { action, createStoreContext } from '@twocatmoon/react-actions'
   - or -
   import { action, createStoreEventBus } from '@twocatmoon/react-actions'

Usage

Please refer to the Documentation

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

Project Link - https://github.com/twocatmoon/react-actions

Acknowledgments

• Best-README-Template