Redux for beginners

I am in the middle of my project and I have been experimenting with REDUX recently. It was very intimidating to me at first so I wanted to share a small guide to sum up the most important things and to explain it in a very simple way. I hope it helps others.

Little about me I am a beginner Software Engineer so there might be better ways to do this or you can find cleaner code.

Why is Redux good?
Well basically you know how you have to pass down your states and props in React to use them in your components. Sometimes you have to pass it down to more then 1 component so it can be a bit of a pain. Redux helps you to access those functions/states in any component.

The following guide is based on a basic Counter Application.

A step by Step guide to Redux Basics

Very first thing setting up Redux:
create your react app:
npx create-react-app counter
cd into you react app
in your terminal:
npm install redux
npm install react-redux

There are 4 sections with Redux(at least what I know so far).

Sections:
REDUCER - pretty much your functions/states
STORE - your globalized state(this is what you will pass down to all your components so you can use your function anywhere)
ACTIONS - this will help you use the functions (like increment/decrement/changing true/ false etc.(
DISPATCH - to dispatch your actions

Of course under the hood there is lot more happening but again I just want to provide a simple guide.

/////////////////////////////////////////////////////////////
Step 1.
first setup files and folders
in src folder create:
actions folder
reducer folder

Step 2.
in action folder create:
index.js
in reducer folder create:
index.js
counter.js

Step 3.
in counter.js file

REDUCER:

const counterReducer = (state = 0, action) => {
  switch(action.type){
    case "INCREMENT":
      return state + action.payload;
    case "DECREMENT":
      return state - 1
    default:
        return 0
  }
};
export default counterReducer;

If you have multiple reducers a combiner can be used
Before using combiner import it from redux library:

import counterReducer from "./counter";
import { combineReducers } from "redux";

all reducers need to be imported to the combiner file in this case index.js in reducer folder.

Now that the Reducer is setup
We can move to next section which is Store

Step 4.
In this step we will work in the src/index.js file.
To start with lets import hooks and files.

import { createStore } from 'redux';
import allReducers from './reducers/index.js'
import { Provider } from 'react-redux';

after the import is added:

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

When the store is created the allReduces file we created earlier will be added and an other line of code which basically allow you to check your work in the Dev Tools, otherwise you would have to work blindly.

The last thing needs to be setup in our current file is the Provider imported earlier.
Wrap your App component with the provider as follows.
Then pass the store variable to the Provider hook.

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
  <React.StrictMode>
    <App />
  </React.StrictMode>
  </Provider>
);

Step 5
ACTIONS

in you action/index.js file

export const increment = (number) => {
    return {
        type : 'INCREMENT',
        payload: number
    }
}
export const decrement = () => {
    return {
        type : 'DECREMENT'
    }
}

**
Final Step
**

in you App.js filer
import hooks and files:

import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./actions";

useSelector will allow you to set the state of and display or use the result of that function

const counter = useSelector(state => state.counter)
const dispatch = useDispatch()

With the dispatch variable we can finally add functionality to our counter button. and the counter variable will keep track of the total of our counter.

return (
    <div className="App">
      <h1>Counter {counter}</h1>
      <button onClick={() => dispatch(increment(5))}>+</button>
      <button onClick={() => dispatch(decrement())}>-</button>
      <button onClick={() => dispatch(signIn())}>Change state</button>
    </div>
  );

We could also add other functionality with reducers like filter or true false statement and create conditional statements when logging in.

This got a little longer then expected but it should sum up the basics.
Hope this helps.