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.

constcounterSlice=createSlice({name: "counter",initialState: {value: 0},reducers: {increment: (state)=>{state.value++;},},});const{ increment }=counterSlice.actions;functionComponent(){const[counterState,counterDispatch]=useReducer(counterSlice.reducer,counterSlice.getInitialState(),);return(<><p>Valueis{counterState.value}</p><buttononClick={()=>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'constcounterSlice=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.

[monochromer]

Is there way to use this approach with async thunk actions and selectors?

[markerikson]

@monochromer can you clarify the question? what are you hoping to do specifically?

[monochromer]

I want create something like this:

reducers: (create)=>{return{increment(state){state.value=state.value+1;},decrement(state){state.value=state.value-1;},fetch: create.asyncThunk(async()=>{returnMath.random();},{fulfilled: (state,action)=>{state.value=action.payload;},}),};},

and then call it:

dispatch(store.actions.fetch());

But this code doesn't work.

Demo: https://stackblitz.com/edit/vitejs-vite-aj31g6bl?file=src%2FApp.tsx

[EskiMojo14]

async thunks can't work with react's local state, unfortunately - there's no way to retrieve the updated state synchronously