Make Redux Store Magic With Some OOP Approach

IT’S being a while since we started using Typescript in our project (thanks God!) and in fact it offers own way to develop applications. The thing is that ES6 and Typescript offer your code to be more object-oriented. Some people prefer more functional programming in JS but I feel like we can achieve more on the edge of both worlds — object-oriented programming and functional programming. In this article I want to share my way to describe redux stores in my ReactJS applications.

Redux is a brilliant useful library and by the way very simple, so we use it all the time with React. If you don’t know much about Redux t̶h̶e̶n̶ ̶c̶h̶e̶c̶k̶ ̶t̶h̶e̶ ̶c̶a̶l̶e̶n̶d̶a̶r̶,̶ ̶i̶t̶’̶s̶ ̶2̶0̶1̶9̶ ̶a̶l̶r̶e̶a̶d̶y̶ I would strongly recommend to dive into it, understand how it works and try in your projects. For Angular folks we have something pretty similar called NgRx.

Main thing Redux stays on is to have new state object every time store updates data, so I eventually see such lines:

Does anybody love this? I don’t. I don’t love all that switch-cases even if the Typescript will cover your back and will ask you to implement code for every action type. But. The most terrible thing here as to me is how we manipulate the state. We get a new state different ways. It might be lodash-ish state = _.clone(currentState) or more standard usage of spread-operator like state = { …currentState }. Or if you have more complex structure with another reducer in state, you need to clone it manually, so in complex case you need to have a clone function.

Also you might miss some properties to define like here we don’t have queryString defined in initialState so we can’t see full picture on what exactly this state includes. In case we have more than just updating some property — that…