I have used Redux for several years. Each time I try to set a new project up, I always forget how to and spend a good hour cursing. I am dumb. This is my dummies guide to redux. Redux is a useful package you can install from NPM that will manage your react applications state. It existed before hooks. When you use Redux to manage state you will typically have to create a folder called 'state'. In here you will create four folders actions, constants, reducers, selectors. Pretty much every-time you use redux you will call an API to get data.
Redux works using a store. A store an area where data will be saved. By connecting a component up to this store, then the component can access any of the saved properties stored inside it. The code to create a store looks like this:
Two things you may notice with the code above. First, we define this thunk thing. Second, we pass a custom reducer into the store using combineReducers. Let's examine these things.
Redux is configured using reducers. Reducers may have a fancy name, they are not. A reducer is basically a function with a switch statement inside it. Within an application, you usually have multiple reducers. It is a good practice to write one reducer per function. In the code above you may have noticed
combineReducers. You can use this to combine/register multiple reducers within the store. This helps keep your reducers clean. Examples of items you might want to manage in state, include user status, items in cart, wishlist items, credit amount etc... Like any well-written code. Decouple the reducers to ensure they only do one thing. Create one reducer to deal with user status, one for items in cart etc...
When an event is triggered, redux will call all the reducers that have been registered in the store. When a reducer is called by redux its purpose its purpose is to check that the event - the value inside the
type argument - matches some value. A reducer will normally look similar to this:
Events are triggered by actions. In the action files, a dispatch is used to broadcast an event. If the action broadcasts 'FETCHSONGSSUCCESS' then the case within the reducer will be executed. This code returns an object. Below shows what a return object might look like for a success event.
Back to the store set-up. the second point to talk about is
thunk. the files in the action folder will contain the doing code. Like calling an API. By default redux only like actions to return data as strings. If you want to work with APIs that uses promises or callback then you will likely want to return functions rather than string. thunk job is just that. thunk allows you to work with functions in actions.
The files in action will call the API. An action may look similar to this:
Notice how we use dispatch to broadcast events to redux. These events will then cause the reducers to be triggered. Selectors will be called to filter this data into a format that your application wants to use. A selector could look like this:
See how the selector formats the data into a format the application cares about. Redux forces you to use good separation of concerns. Actions drive the data to be held in the store. Reducers control what happens when events are fired. Selectors manipulate the data. Selectors are usually called after a successful broadcast is made.
You now have a store that manages and saves data for you. To get a component within your application to have access to the store you connect it. connecting is simple:
You can pass in the action function so the store will get the data. Within a higher-order component style, you pass the component you want to connect the store in. Job done.