Applicable React Redux example step by step from scratch
Tags: redux, react, reactnative, javascript
Published: 2021-11-28 02:49:05

A simple example of React Redux

<b>Step 0: Create a react app and install redux </b>

```
npx create-react-app reactapp
cd reactapp
yarn add react-redux
```

<b>Step 1: Create actions</b>

<b>ACTIONS</b> -> INCREMENT (describes what you want to do!) it's a simple function
In src create a folder name it actions and add file named index.js 

##### src/actions/index.js

```javascript
export const increment = (number) => {
	return {
		type: "INCREMENT",
		payload: number,
	};
};

export const decrement = () => {
	return {
		type: "DECREMENT",
	};
};

```

<b>Step 2: Create reducers</b>

<b>REDUCERS</b> -> here an action transfer from one state to another state, it gonna modify our store.
You can have many reducers (Authentication reducer, Movielist reducer etc ...)

Create a folder called reducers
inside reducers create counter.js file

##### src/reducers/counter.js

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

export default counterReducer;

```
inside reducers create a second reducer named isLogged.js file.

##### src/reducers/isLogged.js

```javascript
const loggedReducer = (state = false, action) => {
	switch (action.type) {
		case "SIGN_IN":
			return !state;
		default:
			return state;
	}
};

export default loggedReducer;
```
inside reducers create a index file to export them.

##### src/reducers/index.js

```javascript
import counterReducer from "./counter";
import loggedReducer from "./isLogged";
import { combineReducers } from "redux";

const allReducers = combineReducers({
	//you can name it anything
	//counterReducer (this means counterReducer:counterReducer )
	counter: counterReducer,
	isLogged: loggedReducer,
});

export default allReducers;

```

<b>Step 3: Create your Store</b>

<b>Store</b> -> You can add your store in app.js.
You can only have one store

##### src/app.js
```javascript
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { increment, decrement } from "./actions";

function App() {
	const counter = useSelector((state) => state.counter);
	const isLogged = useSelector((state) => state.isLogged);
	const dispatch = useDispatch();

	return (
		<div className="App">
			<h1>Counter {counter} </h1>
			<button onClick={() => dispatch(increment(5))}>+</button>
			<button onClick={() => dispatch(decrement())}> -</button>
			{isLogged ? <h3>Valuable Information I shouldn't see</h3> : ""}
		</div>
	);
}

export default App;
```
<b>Testing it</b> 
<b>Option 1:</b>  check the console in inspect to see how it increments and decrements.
Option. 
<b>Option 2:</b> Install <b>Redux Devtool</b> chrome extension.
<link>https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en</link>

<b>Github repo:</b> 
<link>https://github.com/Byusa/learn-redux</link>

Reference:
<link>https://react-redux.js.org/</link>
<link>https://redux.js.org/tutorials/fundamentals/part-5-ui-react</link>
<link>https://www.youtube.com/watch?v=CVpUuw9XSjY</link>