React - State Management Tools

Early Days

When React was new, people expected that developers would combine it with other tools. One idea was to use React to handle the state of individual components, and to use a tool like Redux to manage state that's shared across multiple components or the entire app.

People would use React to handle the local state and use Redux for global state.

What is Global State in React?

When you log in to your Instagram account, you will see posts from your friends, your inbox, and hopefully some cute cat videos. Your login status on Instagram represents the global state of the app.

Components like the inbox and friends feed check if you are logged in, and will hide this data if you sign off.

What is Local State in React?

Number of likes on a public cat video is an example of local state. Anyone with the link can see the number of likes on that post, and the likes component does not care whether you are logged in or not.

If we make the same post privet, that component will become a global state, now the App will check if you are following the owner of the cat video. If you do not, the Instagram App will politely ask you to send a follow request, otherwise you won't be able to see it.

Global state is shared across multiple components while local state is specific to a component.

Welcome Redux!

Redux stores the App's global state as a single object, which exists outside of the App component. It's like having two separate sheets of paper connected side by side, where one sheet represents the App and the other represents Redux.

In Redux, the state is viewed as immutable and can't be edited directly. To update the state, actions are dispatched and listened to by Redux, which uses them to determine how to update the state

In simple terms, in Redux, you cannot directly edit the state because it's not editable. Instead, to update the state, you dispatch actions that Redux listens to the dispatched actions and uses them to determine how to update the state.

Redux is like Sherlock Holmes, any changes made in the App state is logged and can be traced back and forward and with the power of the browser plugin 'Redux DevTools', you can investing bugs and solve them.

Let's login to Instagram:

• Enter username and password and hit login

• Search for 'Fat cats' and submit
• Server returns search results / image thumbnails
• We swipe down to see more chonkers
• server returns more search results
• We found the perfect chonker and clicked on the post.

Chonker: a fat cat

The state in Redux state is considered immutable, just like in React state, but Redux has additional capabilities that make it a powerful tool.

The Redux DevTools plugin allows you to investigate bugs and use the time-travel debugging feature to step through logs and see UI changes at specific points. It's no exaggeration to say that Redux is like Sherlock Holmes when it comes to debugging.

Not only that, there many add-ons that can be used with Redux to enhance it's capabilities. Depending on your needs, you can customize Redux with those plugins.

With Great Power Comes Great Headache

If it's that great and and powerful, why not use it on every single project?

Learning curve is steep, to use Redux you need to know functional programming principles. Development time increases and the project requires a bit more code and most people dislike the fact that it comes with too much boilerplate code.

The Modern React Era

After the introduction of hooks in React, some developers have argued that Redux is no longer necessary. While some people believe that React can do everything Redux can and with less problems and drawbacks using the useReducer hook. One of the Creators of Redux, Dan Abramov who works in React's core team today tweeted that "i struggle to think of a case where i’d want to use it myself".

Others point out that Redux is still going strong and growing in popularity according to NPM downloads. So it seems that both sides have valid points and it ultimately depends on the specific use case.

1. When it comes to simpler projects like blogs, websites, or landing pages, you're good to go with just using components with local state. You won't be dealing with much global state, Redux isn't needed.

2. To create more complicated apps, like a video editing app or a text editor, where there's lots of global state and things are interdependent, you might wanna consider using Redux. It can really make your life easier by improving the coding experience, for example, disabling one button could cause an event that affects other parts of your app. Use of Redux isn't still

3. E-commerce sites, admin dashboards, SaaS app's, social networks and anything similar that heavy depends on a server to fetch, display, adjust the app you don't really need it. Redux is for state, and it has nothing to with network related problems. There are different tools for those needs, like Apollo and React-Query.

Static websites?

• No Redux needed

Games, video editing, text editing apps and similar client heavy apps?

• Consider Redux

Server Heavy apps, social media sites, e-commerce pages?

• Take a look at other options like React-query and Astro.

The old days and resources

If you're browsing old tutorials for creating e-commerce websites with React, you'll notice that many of them lean heavily on Redux for state management. But let's face it, React is a rapidly evolving technology, and there are now many ways to manage state that may be more effective and efficient for your project.

Don't get me wrong, Redux can still be a powerhouse for managing complex state, but it's not always the best fit for simpler projects. Before diving in, take a moment to evaluate your needs and assess the feasibility of other approaches, like the built-in useState or useReducer hooks.

The bottom line is that you want your project to be maintainable and scalable. That means using modern tools and staying up-to-date with the latest best practices. So before diving into an older tutorial, check to see if it reflects current thinking and practices.