Redux Toolkit in Action
At this point, you’ve learned about the important basics of Redux and how it can be used in a React application, but the more complex the project becomes, the more complex it also gets when using Redux. Now, the good thing is that there is a slightly easier way of using Redux.
Henceforth, we will dive into an approach that is a bit easier to set up and maintain.
Before that though, it would be ideal to identify a couple of problems that we could face if our React application would continue to grow, that is if we manage more and more state with Redux:
One potential issue may be the action types. While dispatching actions, it becomes so important to avoid typographical errors while working with the identifiers, otherwise, the action would not be handled by the reducer or won’t be handled correctly. While that didn’t seem to be a problem in a small app like the counter app, it could be a problem in a bigger application with a lot of developers working on the app simultaneously; and with a lot of different actions, an identifier could easily me mistyped or clashing with another. Thus, a way to possibly define identifiers once and keep reusing them would be nice.
Another potential problem is the amount of data that is managed in the reducer. The more data, the more the different pieces of state in the app, thus, the bigger the state objects get, which also means that the reducer function would keep getting longer and longer.
Another problem is the case of state immutability which is to be respected. There is a need to ensure that a brand-new state snapshot is always returned and that the existing state is not accidentally changed directly from anywhere.