Skip to content

A react hook to use reducers for local state in a typesafe way, with an API like createSlice from redux-starter-kit and immer integration.

License

Notifications You must be signed in to change notification settings

phryneas/use-local-slice

Repository files navigation

use-local-slice

An opinionated react hook to use reducers for local state

How to use it

const [state, dispatchAction] = useLocalSlice({
  slice: "my slice", // optional - will be displayed in the debug tools
  initialState: { data: "initial text", someOtherValue: 5 },
  reducers: {
    concat: (state, action: { payload: string }) => {
      // reducers are passed an immer draft of the current state, so you can directly modify values in the draft
      state.data += action.payload;
    },
    toUpper: state => ({
      // or you return a modified copy yourself
      ...state,
      data: state.data.toUpperCase()
    })
    // more reducers ...
  }
});

and in some callback:

dispatchAction.concat("concatenate me!");
// or
dispatchAction.toUpper();

use-local-slice provides one dispatchAction method per reducer, and (for typescript users) ensures that these dispatchers are only called with correct payload types.

Edge case uses & good to know stuff

  • reducers can directly reference other local component state & variables without the need for a dependencies array. This is normal useReducer behaviour. You can read up on this on the overreacted blog: Why useReducer Is the Cheat Mode of Hooks
  • you can exchange reducers for others between renders - as long as the keys of the reducers property do not change, you will get an identical instance of dispatchAction.
  • only renaming, adding or removing keys will get you a new dispatchAction instance

About

A react hook to use reducers for local state in a typesafe way, with an API like createSlice from redux-starter-kit and immer integration.

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published