DEV Community

Discussion on: React doesn't need state management tool, I said

 
stepan662 profile image
Štěpán Granát

Yep, I opened the article with a bit of provocation, that's true. I also made sure, it's clear that it's only my personal opinion. But I truly think that this way of managing the state can remove the need of REDUX. I don't say, that it's just this little piece of code that I wrote, but basically instead of using REDUX for everything (state, API calls, forms ...), we use hook libraries like react-query, formik etc. I'm sure people are doing this all the time. However sometimes there is a need for a bit of complex state management and that is what we use this solution for - it enables you to combine multiple hook libraries and create a piece of state, that is:

  • shared with children (avoiding props drilling)
  • local (lives and dies with the provider)
  • and performant (you update only components that need to)

Also, I'm not really using reducer as is defined by REDUX/FLUX. I think real reducer should get the action and return new state, that's not what I'm doing. I'm only recieving actions, but modifying the state through callbacks like setState. It's a subtle difference I know, but this allows you to use it with react-query and not to keep the whole state on one place as "proper" reducer would.

Thread Thread
 
sgarciadev profile image
Sergei Garcia • Edited

Totally fair and agreed. Sorry if my original comment was a little direct.

Btw, but just to end with 0 chance of doubt, did you try Redux Toolkit before making this or writing the article? 🤔 Curious because of this statement:

I'm not really using reducer as is defined by REDUX/FLUX. I think real reducer should get the action and return new state, that's not what I'm doing. I'm only recieving actions, but modifying the state through callbacks like setState.

Reducers made with Redux Toolkit don't return new state either, they only receive an action and mutate state (thanks to an immer compat layer), exactly like you described 😅 See: redux-toolkit.js.org/api/createSlice

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  // "real" react redux toolkit reducer
  reducers: {
    increment(state) {
      state.value++ // state mutation 🙂
    },
    decrement(state) {
      state.value-- // another state mutation!
    },
    incrementByAmount(state, action) {
      state.value += action.payload // notice how we don't return anything here 👀
    },
  },
})
Enter fullscreen mode Exit fullscreen mode

If you weren't aware of that, I wonder if this could explain the confusion from all sides 😅 And if so, I hope this explains why we all feel like you just wrote a 1:1 "lite" version of Redux + Redux Toolkit.

Thread Thread
 
stepan662 profile image
Štěpán Granát

Don't get me wrong I think there are still use cases for REDUX and if I ever find myself in a position that I will need that, I'll definitely try redux toolkit or some similar tool.

However I still don't agree that my solution is the same as redux toolkit. I see redux toolkit as a "syntax sugar" for redux to reduce boiler plate, that's fine. However, my main complain is that REDUX brings unnecessary complexity for majority of projects, you can cover up the complexity with tools like redux toolkit. But from my experience it's better to avoid the complexity from the beginning.

I don't think I've re-built redux toolkit, but if so, that would be actually quite bad sign for redux - think about it ... You take quite a complex library, which you need additional toolkit to be usable and you end up having same solution as writing 30 lines of code.

.
.
.

Last part is exaggerated of course :)

Thread Thread
 
murkrage profile image
Mike Ekkel

You don't need the toolkit for it to be usable. The toolkit is an opinionated way of setting up and using redux but it's just as easy to use redux without it. The power of the toolkit is that you'll be familiar with all other implementation of the toolkit whereas Redux itself gives you a lot of freedom to set it up however you like.

A good example is the addition of Immer in the toolkit. It's absolutely not necessary for Redux but you could implement it yourself without the toolkit if you wanted to.