How to create local state?

[razb-viola]

I only able to create global states with redux, called slices and reducers that are exported as a global store.
But if I want to have a state management for local dumb component which is just a very simple one? Should I add its particular store to the global one and inflate it?

I have tried to do the same thing as I do when declaring the global state - however when I ran the useSelector I only got in return the attributes from the global state.

[markerikson]

We specifically recommend using normal React component state wherever it makes sense (like just that component or its immediate descendants needing that data):

• https://redux.js.org/tutorials/essentials/part-2-app-structure#component-state-and-forms
• https://redux.js.org/style-guide/#evaluate-where-each-piece-of-state-should-live

[EskiMojo14]

Yeah, Redux is by nature a global state solution.

It's worth noting though that if you're a particular fan of the slice pattern, it's possible to use reducers and action creators made with createSlice in combination with useReducer.

const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value++;
    },
  },
});

const { increment } = counterSlice.actions;

function Component() {
  const [counterState, counterDispatch] = useReducer(
    counterSlice.reducer,
    counterSlice.getInitialState(),
  );
  return (
    <>
      <p>Value is {counterState.value}</p>
      <button onClick={() => counterDispatch(increment())}>Increment</button>
    </>
  );
}

[razb-viola]

That's actually exactly what I wanted. In order to help others, I convert your example from JS to TypeScript:

type State = { value: number }
type Reducers = {
  increment: (state: State) => void
  incrementWithProps: (state: State, action: PayloadAction<{ times: number }>) => void
}

const counterSlice = createSlice<State, Reducers, 'counter'>({
  name: "counter",
  initialState: { value: 0 },
  reducer: {
    increment: (state) => {
      state.value++;
    },
    incrementWithProps: (state, action) => {
      state.value += action.payload.times
    }
  },
})

The incrementWithProps is important for people that try to use it with TypeScript, since it receives the props using the wrapped PayloadAction type from redux, which is generic and here I showed how to use it.

Thanks guys.

[phryneas]

Please don't type it like that. The generic arguments of createSlice are meant to be inferred, they should never be manually specified. The example was already perfectly fine TypeScript, but if you need a payload, here is how it is supposed to be used:

import {createSlice, PayloadAction} from '@reduxjs/toolkit'
const counterSlice = createSlice({
  name: "counter",
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value++;
    },
    incrementWithProps: (state, action: PayloadAction<{times: number}>) => {
      state.value += action.payload.times
    }
  },
});

[EskiMojo14]

see Define Slice State and Action Types in our typescript usage guide

[razb-viola]

Ok I see. Thanks. The inference works correctly as you said. It's indeed only needed for the action.

[razb-viola]

BTW in the action we have the type, why it's needed?
Doing so:

incrementWithProps: (state, action: PayloadAction<{times: number}>) => {
  state.value += action.payload.times
}
dispatch(incrementWithProps({ times: 2 }))

Will not make a use with the type. But type is included on every call to every reducer, why?

[EskiMojo14]

action.type is used by the slice reducer to know that it should be calling this case reducer.