Redux is widely recognized as a robust state management library designed specifically for JavaScript applications, often utilized in tandem with the popular framework React. By offering a dependable state container, Redux establishes a solid foundation that greatly simplifies the task of handling and troubleshooting application states. Throughout this guide, we will delve deeply into the fundamental components that comprise Redux, providing detailed explanations of each element and illustrating how they synergistically interoperate to streamline the overall functionality of the application. This in-depth exploration aims to elucidate the inner workings of Redux, empowering developers to grasp the intricacies of this state management tool and harness its capabilities effectively in their projects. ## Table of Contents - Introduction to Redux - Setting Up Redux in a React Application - Actions and Action Types - Reducers and Slices - Configuring the Store - Connecting React Components - Conclusion and References ## 1. Introduction to Redux Redux follows a unidirectional data flow model and is based on three core principles: Single source of truth: The state of your whole application is stored in an object tree within a single store. This centralization makes it easier to debug and track changes across your application. State is read-only: The only way to change the state is to emit an action, an object describing what happened. This ensures that state mutations are predictable and traceable. Changes are made with pure functions: To specify how the state tree is transformed by actions, you write pure reducers. Pure functions are predictable and testable, which simplifies debugging and unit testing. ## 2. Setting Up Redux in a React Application First, install Redux and React-Redux: `npm install redux react-redux @reduxjs/toolkit` This command installs the core Redux library, the React bindings for Redux, and the Redux Toolkit, which simplifies many common tasks like setting up the store and creating slices. ## 3. Actions and Action Types Actions are payloads of information that send data from your application to your Redux store. Action types are constants that represent the action. actionTypes.js ``` export const INCREMENT = "INCREMENT"; export const DECREMENT = "DECREMENT"; export const INCREMENT_BY_VALUE = "INCREMENT_BY_VALUE"; export const RESET = "RESET"; export const increment = () => ({ type: INCREMENT }); export const decrement = () => ({ type: DECREMENT }); export const incrementByValue = (value) => ({ type: INCREMENT_BY_VALUE, payload: value, }); export const reset = () => ({ type: RESET }); ``` Defining actions and action types clearly helps maintain consistency and reduces errors in your application. ## 4. Reducers and Slices Reducers specify how the application's state changes in response to actions sent to the store. Slices are a collection of Redux reducer logic and actions for a single feature of your app, created using Redux Toolkit's createSlice method. counterSlice.js ``` import { createSlice } from "@reduxjs/toolkit"; const initialState = { number: 0 }; const counterSlice = createSlice({ name: "counter", initialState, reducers: { increment: (state) => { state.number += 5; }, decrement: (state) => { state.number = Math.max(0, state.number - 5); }, incrementByValue: (state, action) => { state.number += action.payload; }, reset: (state) => { state.number = 0; }, }, }); export const { increment, decrement, incrementByValue, reset } = counterSlice.actions; export default counterSlice.reducer; ``` rootReducer.js To combine multiple slices: ``` import { combineReducers } from "@reduxjs/toolkit"; import counterReducer from "../slices/counterSlice"; const rootReducer = combineReducers({ counter: counterReducer, }); export default rootReducer; ``` ## 5. Configuring the Store The store is the object that brings actions and reducers together. It holds the application state, allows access to it via getState(), updates it via dispatch(action), and registers listeners via subscribe(listener). store.js ``` import { configureStore } from "@reduxjs/toolkit"; import rootReducer from "../reducers/rootReducer"; const store = configureStore({ reducer: rootReducer, }); export default store; ``` ## 6. Connecting React Components To connect React components to the Redux store, use the Provider component from react-redux to pass the store down to your components, and use the useSelector and useDispatch hooks to access and manipulate the state. App.js ``` import React from "react"; import { Provider } from "react-redux"; import store from "./redux/store/store"; import Counter from "./components/Counter"; import MusCo from "./MusCo redux logo.png"; function App() { return (

Practice Redux with MusCo

by Mustafa Coskuncelebi

); } export default App; ``` CounterComponent.js ``` import { useDispatch, useSelector } from "react-redux"; import { decrement, increment, incrementByValue, reset, } from "../slices/counterSlice"; import { useState, useEffect } from "react"; function Counter() { const [value, setValue] = useState(""); const dispatch = useDispatch(); const number = useSelector((state) => state.counter.number); useEffect(() => { const showcase = document.querySelector("#showcase"); if (number < 5) { showcase.style.visibility = "visible"; } else { showcase.style.visibility = "hidden"; } }, [number]); return (

Counter

{number}

{ let newValue = e.target.value.trim(); if (newValue === "") { newValue = ""; reset(); } // Check the trimmed value consists only of digits if (/^\d*$/.test(newValue)) { setValue(newValue); } }} value={value} placeholder="Enter Value" />

Counter cannot be less than 0

); } export default Counter; ``` ## 7. Conclusion and References Redux is a powerful library for managing state in your applications. By understanding actions, reducers, the store, and how to connect everything to your React components, you can create predictable and maintainable applications. Key Points: Actions: Define what should happen in your app. Reducers: Specify how the state changes in response to actions. Store: Holds the state and handles the actions. Provider: Passes the store down to your React components. Project Files: Here you may access the project files stored in my GitHub repository. [redux-counter](https://github.com/mcc1461/redux-counter) For more information, check out the official Redux documentation: [Redux Documentation](https://redux.js.org/) [Redux Toolkit Documentation](https://redux-toolkit.js.org/) [React-Redux Documentation](https://react-redux.js.org/) By following this guide, you should have a solid understanding of Redux and be able to implement it in your own applications. Happy coding! _published on [hashnode](https://musco.hashnode.dev/master-redux-a-simple-guide-for-react-developers) and [medium](https://medium.com/@mcc1461a/master-redux-a-simple-guide-for-react-developers-409a2190171a)_

mcc1461

Master Redux: A Simple Guide for React Developers

Join Our Newsletter. No Spam, Only the good stuff.