In this post you will learn what is the correct and recommended approach to write React code and Redux code.

Now so long ago I got a message in Twitter regarding my latest video about Redux Saga from redux-toolkit maintainer.

He wrote that I recommend out of date approach to write Redux code. This is write in this post I want to talk about recommended ways to write React and Redux code.

React

Actually React and Redux evolved a lot during all these years. For example at the beginning of React we had classes approach.

Nowadays you should not use classes because it is considered out of date approach and it is not recommended

The same goes about High Order Components (HOC) which we used together with classes.

The next step of React was render props and it is also obsolete today.

What we are using inside React is only hooks. This is why if you are writing new project you should not consider using classes or render props approach at all. You must just work with React hooks.

They are pros and cons of using hooks but this is a modern and recommended approach of React itself.

And actually we still have support of classes so you can safely use them but it is not recommended and we never know when they will remove classes support inside React.

Redux

Now let's talk about Redux. This is where we have some confusion. Because actually we have plain Redux and we have Redux toolkit. And a lot of people ask "What is the recommended way to use Redux?".

The recommended approach is Redux toolkit.

In some of my posts I didn't use Redux toolkit but just plain Redux. And actually this is not bad because all basic Redux functions are still there and they are still supported. So we get things like combineReducers, createStore, applyMiddlewares and other things but this is not a recommended approach.

Previously I though that Redux Toolkit is just a sugar around Redux because we still have this low-level functions from Redux so we can build everything on our own. But essentially this is not completely true.

Inside Redux team they want to leverage Redux toolkit and not plain Redux to write less code than with plain Redux. And they even considered to remove standard things from Redux like for example createStore. But as you can see in the screen about they just marked it as deprecated.

Do we need plain Redux?

But here is a super important point.

If you want to learn Redux you must first understand it without Redux Toolkit sugar.

It is extremely important because it is a low level code and you must understand how to write it. But obviously later in all your projects it is highly recommended to use Redux only through Redux Toolkit.

And actually if you don't know what is Redux Toolkit at all I highly recommend you to check my full post about it where we convert plain Redux application to usage of Redux Toolkit.

So why is Redux Toolkit a recommended approach? Because it is much less code that you must write and it is easier to understand this code.

Here is how to are setting up store typically inside Redux. This is quite a lot of code. Sure you can read this code and actually you must understand what's going on here if you want to know Redux on a good level but here is an approach of Redux Toolkit.

As you can see here we have just 3 lines with configureStore and obviously is it much cleaner and more understandable.

Also when writing reducers previously we wrote a switch case with immutable returns inside.

Now we have a function createReducer where we can do exactly the same but it is much cleaner and we can write mutable code inside this cases.

So Redux toolkit makes it much simpler for you. But I'm not a huge fan of writing mutable code with the sugar when it will be converted later to same immutable code like Redux needs.

Asynchronous code

And the last thing that I want to mention is how to write asynchronous code with Redux and React nowadays.

Typically inside Redux you use Redux-thunk. It is included by default inside Redux-toolkit and you can use a function which is called createAsyncThunk.

This is just a helper to create asynchronous actions. Now inside our code we can simply dispatch this asynchronous action.

So nowadays the recommended approach to write asynchronous actions inside Redux is by using createAsyncThunk.

RTK Query

But createAsyncThunk is still quite a low level approach. What we have additionally inside Redux-Toolkit is Redux-Toolkit Query. The main idea of this tool is to simplify fetching data and storing them inside state.

If you are familiar with tools like Apollo-Client or React-Query this is exactly copy-paste inside Redux Toolkit.

We get out of the box fetching, caching, optimistic updates and much more.

All data from RTK Query is still stored inside Redux so you can continue to use Redux normally. This tool will create automatically properties like isLoading and it will create a slice inside Redux to store fetched data.

So if you are writing some code where you are fetching data, creating isLoading state than you might consider RTK Query.

Can I use older approaches?

Now the most important question: "Is it fine to use older approaches?". Like for example Redux-sage that I mentioned previously. Yes Redux-Saga is quite an old approach of writing asynchronous actions. But is it stable? Yes sure. It is used in a lot of production projects? Yes. Was it updated not so long ago? No, it is an old tool. But this is a really stable tool that you can still use.

Obviously it is not recommended by Redux team but not every single old tool is bad.

And another approach that might be interesting for you is called Redux-observable. If you come from Angular world you for sure know something about RxJS.

The main idea is that we can leverage RxJS to working with it inside Redux and we can use observables to work with APIs.

On the official website you can find information that it is in maintenance mode. But it doesn't mean that it is bad. It means that nobody because something inside it by releasing new version.

And actually if you are interested to learn how to build real React project from start to the end make sure to check my React hooks course.