React-Store-Toolkit

React Store Toolkit is a library heavily inspired by Redux Toolkit but for React Context API and useReducer.

API

createStore(initialState, reducer, middlewares?,)

declare function createStore<State>(
  initialState: State,
  reducer: Reducer<State, AnyAction>,
  middlewares?: Middleware<AnyAction, State>[]
): {
  useState: () => State
  useDispatch: () => React.Dispatch<AnyAction>
  StateProvider: React.FunctionComponent<Partial<State>>
}

| returned object | description | | --------------- | -------------------------------------------------------------------------------- | | StateProvider | The context provider (React Element) that provides the store to all its children | | useState | Hook that returns the value of the state stored in the Provider | | useDispatch() | Hook that returns a dispatch function |

The Middleware follows the exact same pattern as Redux based middlewares so therefore Redux middlewares like redux-logger and redux-thunk are directly compatible!

createSlice()

• This is the same createSlice API in Redux Toolkit except that we are not using Immer and your state updates need to return the newly created state.

createReducer()

• This is the same createReducer API in Redux Toolkit except that we are not using Immer and your state updates need to return the newly created state.

createAction()

• The exact same as Redux Toolkit

useActionDispatch()

declare function useActionDispatch(
  action: ActionCreatorWithoutPayload<string>,
  useDispatch: () => React.Dispatch<AnyAction>,
  payload?: false
): () => void

This hook returns a Callback that lets you call the action specified within a react component. Here is an example:

// store.ts
export const useSetDecrement = () =>
  useActionDispatch(decrement, useDispatch, false)
export const useSetIncrement = () =>
  useActionDispatch(increment, useDispatch, false)

// Counter.ts
const increment = useSetIncrement()
const decrement = useSetDecrement()
return (
  <>
    <button onClick={() => increment()}>Increment</button>
    <button onClick={() => decrement()}>Decrement</button>
  </>
)

Take note of the payload parameter passed in which is defaulted to true. If your action has no payload, you must set it to false explicitly.

createActionEffect()

Returns a hook that allows you to update a part of your store similar to a useEffect.

// store.ts
export const useSetCounterName = createActionEffect(changeName, useDispatch)

// Counter.tsx

Example

Examples are available in the Example directory