Redux

You can think of Redux as a bank: you can’t go to your local branch and manually modify your account total (“here, let me just add a couple extra zeroes!”). Instead, you fill out a deposit form, then give it to a bank teller authorized to perform the action.

Similarly, Redux also won’t let you modify your global state directly. Instead, you pass /actions/ to /reducers/, special functions that perform the operation and return the new, updated state as a result.

The result of all this extra work is a highly standardized and maintainable data flow throughout your app, and access to tools such as the Redux Devtools to help you visualize it.

pass /actions/ to /reducers/, special functions that perform the operation and return the new, updated state as a result.

reducers and actions

Redux store: essentially an empty database for where we keep our data

Actions "something that happens in your application" eg/ someone deletes a comment

/type of action that happend/: ADD_COMMENT

/Payload - information/: post_id, author, comment

• send as little information as possible along with yoru actions

Reducers: act on the information updating things etc

takes in two things:

1. the action (info about what happened)
2. copy of the current state

Add all the reducers into the routeReducer

1. Stores

Also known as a single source of truth, a store is basically just an object that you initialise with some state, then whenever we want to update it, we overwrite the store with a new version of it. You may already be using these same principles in your React applications anyway, as it is generally considered a best practice to recreate state rather than mutating it. To further clarify the difference here, if we had an array and we wanted to push a new item into it, we wouldn’t update our store by pushing a new item into the array, but rather we would overwrite the store with an updated version of it.

2. Reducers

So our store gets updated through something known as a reducer. These basically are the mechanisms by which we send our new versions of state. That may not make much sense just yet, so let’s elaborate a little. Let’s say we have our store object and it has an array that looks like this: list: [{‘id: 1, text: ‘clean the house’}]. If we had a function that adds new items into our array, our reducer will explain to our store how the new version of our store will look. So in the case of our list array, we would likely grab the contents of our list, spread it into a new list array through the ... syntax, along with the new item we want to add. Therefore, our reducer for adding new items may look something like this: list: [...list, newItem]. This is also what we mean here when we discussed how we create new copies of our state for the store, rather than pushing new items into existing parts of it.

3. Actions

Now in order for our reducers to know what new data to put into our state, they have access to a payload. This payload is sent to our reducer through something known as an action. An action is typically accessible within the components in our app — via props — just like any function we create. Because these actions are in our components, we can pass them parameters — these become the payloads.

Created on: 12th October, 2022

Last updated: 12th October, 2022

Tagged With:

• javascript-library