use-local-slice v1.2.1

use-local-slice

An opinionated react hook to use reducers for local state

• in a typesafe way
• with an API like createSlice from redux-starter-kit
• with immer integration

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