Get current state inside the payload - redux

Question

In react, if we want to make a calculation which is based on a property set inside the state, we can write the setState as follows:
const [counter, setCounter] = useState(5)
// instead of this:
// setCounter(counter + 1)
// you can do this:
setCounter((previousState)=> previousState + 1)
This is one of the fundamentals in react.
I am having a complex problem in my code, let's say, so I have no idea how to explain it in a simple question, but let's try to hide all that for now and see if it requires posting the details later 😁.
Is there a similar thing in redux toolkit where I can for instance do something as follows:
import { setCounter } from 'features/posSlice'
const MyComponent = () => {
const dispatch = useDispatch()
dispatch(setCounter((previousState) => previousState + 1))
}
Now you might ask, why you don't implement this inside the reducers? so by doing something as follows:
import { createSlice } from '#reduxjs/toolkit'
const posSlice = createSlice({
name: 'pos',
initialState: {
counter: 5
},
reducers: {
incrementBy = (state, { payload }) => {
state.counter = state.counter + payload
}
}
})
I would say, okay… that's a good question, the reason is, not easy to explain because this is not the real example.
Just for now, let's make it simple:
I would like to know if there's a method to get the current state among all these async calls TO get the correct..current..state in order to build upon it. from inside the controllers, not the models.
So, something like this inside the component, not the slice:
import { setCounter } from 'features/posSlice'
const MyComponent = () => {
const dispatch = useDispatch()
dispatch(setCounter((previousState) => previousState + 1))
}
Is it possible?
thanks 🌹

Answer 1

https://github.com/reduxjs/redux-toolkit/issues/3122#issuecomment-1404879054
I'm sorry, but the question is really "why you don't implement this
inside the reducers".
Caclulation of new state should always happen in a reducer - you
should only pass stuff you need for that calculation into the payload,
never the new value. Please give the Redux Style Guide a good read.
That said, you can do this in a thunk, although I would really
recommend against it.
dispatch((dispatch, getState) => {
dispatch(setCounter(getState().yourCounterValue + 1)) })
So simply do it as
import { useDispatch } from 'react-redux'
// inside a component
const dispatch = useDispatch()
dispatch((dispatch, getState)=>{
dispatch(getState().pos.counter + 1)
})