REDUX for the absolute beginners: code along project step by step!

what is Redux?

Redux is a library that let us manage application state at the high level. Redux lets us centralize access to state in one place.

Why Redux?

How Redux works?

store is the place where we save the sate. The getState is the method to get the state. action & reducer is the method to change the mapStateToProps. This is the basic concept of the redux. You will learn more in depth as you code along.

CODE ALONG and LEARN REDUX

This is the official redux documentation that you can refer to. For this blog step by step instruction, you will get most out of it, if you have basic knowledge of javascript and react. If you do, let’s begin your redux journey. Open your code editors, such as vsc and follow the steps below.

today’s redux goal!

We will create a simple web application that has a counter with 5 increment button and 8 decrement button. We will also learn about how boolean works in redux.

step 1: create an react app

create-react-app learn-redux

step 2 : install redux

npm install redux

step 3: cd to your react folder then install redux for your react app

npm install redux react-redux

step 4: ./src folder, remove 3 files, App.test.js, Logo.svg, App.css

step 5: ./src/App.js. get rid of the react logo

step 6: ./src/index.js. below code will execute the counter on the console however, we will delete all these code and organize them in different files.

step 6–2: remove all the code you wrote in /src/index.js

step 7: in ./src folder, create action folder and reducers folder. In reducers folder, create counter.js,isLogged.js, and index.js files.

step 8: in ./src/reducers/counter.js. We will add counter logic in this file.

step9: src/reducers/isLogged.js. This is where we will store logged in logic.

step10: src/reducers/index.js. In this reducer index file, we will combine both counter reducer and logged in reducer together so the root index file can simply call this reducer index, which has all the reducers. Reducers are called in as an object, a key value pair. If you use es6 syntax, you can simply type the key and value pair once if their names are the same.

step 11: download google chrome redux dev tools extension

step 12: refer to redux dev tool github and in the index.js file, add below window command as the second argument for the createStore.

const store = createStore(allReducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

Go check on your chrome redux extension. You can see the state data in the redux dev tool.

step 13: import Provider from react-redux then render the provider. It connects global state called, store to our entire app. The whole app now has an access to the store, because of the provider! Exciting! Now how can we utilize the counter?

step 14: You have access to the counter from any counter now on. Let’s add the useSelector in the app.js file. Then add the state function in the App function to access the entire state data. Use curly braces to return the counter. Now you will be able to see the state data info on the browser. It’s same logic to the boolean value, isLogged. How can we actually modify the counter and isLogged in value?

step 15: actions/index.js we will export increment and return an object. This is where action.type in reducers/counter.js is originated.

step 16: in App.js, we will import increment and decrement from actions. Then in order to use the action, we have to also import useDispatch, which gives us ability to dispatch the action. In the return event handler button, we can dispatch the action we imported.

step 17: If we want to change the incrementing volume, add the argument in the dispatch increment function. Also add the argument num in the action, then add payload which is num. In the reducer, we can change the hard coded number 1 to action.payload which would dynamically code.

Let’s recap the core redux process and why we are using redux.

3 Redux Core Concepts

  1. Single source of truth

The global state of your application is stored in an object tree within a single store.

2. State is read-only

The only way to change the state is to emit an action, an object describing what happened.

3. Changes are made with pure functions

Any time we have to specify how the state tree is transformed by actions, you write reducers.

so what is Pure Function?

For pure function, if the argument is the same then the return value is the same.

ex1) const doubleFn = num => num * 2 //pure function because the same input will produce the same result.

ex2) const randomFn = () => Math.random() // not a pure function because the same input will produce different results.

pure function’s evaluation has no side effects.

ex1) const addToArrayNonDestructive = (array, newElement) => {

return […array, newElement]

} //pure function because it doesn’t mutate the original array.

ex2) const addToArrayDestructive = (array, newElement) => {

array.push(newElement)

return array

} //not a pure function because it mutates the array.

Message Passing

Message passing is a technique for invoking behavior.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store