REDUX IS THE BOSS.

So, let’s get straight into it. Redux is a JavaScript tool that was created to provide efficiency and state management for an application. When talking about the state of an application, think of it as pausing a video game you are playing. State, in this case, would allow you to pause the game and come back to the game in the exact same position that you were in. And it is the same in Redux. Redux helps us manage the state of our app.

This now very popular and relevant tool was created by Dan Abramov, a software engineer at Facebook. He along with Andrew Clark launched this tool in 2015. The main problem they tried to solve was the managing of the state in a predictable way which is why Redux is best used for large projects.

Why is redux even a considerable tool to use for the development of an app?

I like to think of Redux as the environment of a restaurant. In most restaurants, you have a waiter, line cooks, and manager. The manager’s role is to make sure that the store is running how it is supposed to. The waiter is responsible for taking orders and food placement, and the line cooks are responsible for making meals. Every person has a role.

The most important thing in Redux is its store. The Redux store is created from invoking an imported function called createStore. The store is used to manipulate the state data that is held within. In order to access all the data in your store, you will need to import Provider from react-redux. Through that Provider, you can pass in-store as a prop.

In the example above, we are creating a store. We import createStore from redux to use and we also import our reducer that holds information about our initial state. Then, we create the store by passing in our reducer and a helper tool of Redux called Redux Devtools. Redux Devtools is an extension for Redux apps that helps in debugging your app’s state changes. Finally, we export our store.

In this example, we are passing the store through the Provider component. Don’t be too alarmed by what may not seem recognizable to you right now. In short, all this file does is tell the DOM to render (load) this app. Without this line, we will have nothing to look at.

Somebody call the Reducer!

Now we can move on to the reducer.

Reducers can be a bit messy at times, but no worries. There are only two things to keep in mind about reducer function, the initial state, and the state reducer logic. Typically, reducers are written with switch cases, given each action a name and logic that will return a new state in some way.

In this example, we create a function called reducer. We pass in an initial state of hello and an action object. In our switch, we have a case called ‘CHANGE_GREETING’. We are basically implementing that when this action is called (like clicking a button) our state will toggle between hello and bye. The reducer handles this all.

Okay cool, now we have everything we need, but we need to dispatch the action that we will want to use. This is where the useSelector and useDispatch hooks come in handy. The useSelector hook is used so that a component can read data from the store. With the useDispatch hook, you can use it in your components to update the state. You can dispatch the actions used in your reducer. (see example below)

And just like that, you can consider yourself as a Redux beginner. There is much more to learn and get familiar with!

Happy Redux-ing!