Unlocking Redux: A Comprehensive Guide for React Developers

Redux can be confusing for beginner React developers to understand. You need to know many concepts to use appropriately, like reducers, actions, store, pure functions, immutability, and much more.

But every React developer should know how to work with Redux since industry projects often use Redux to manage larger projects.

What is Redux?

“Redux is a predictable state container for JavaScript apps.”

Redux is a state management library that helps you better manage (global) state in your applications.

Redux is a pattern and library for managing and updating application state, using events called “actions”. It serves as a centralised store for state that needs to be used across your entire application, with rules ensuring that the state can only be updated in a predictable fashion.

Three Core Principles of Redux

• The state of your whole application is stored in an object tree within a single store that acts as your app’s single source of truth.
• Ensure the application state is read-only and requires changes by emitting a descriptive action.
• You write pure reducer functions to specify how the state tree is transformed by actions.

Store :- A Store is a place where the entire state of your application lists. It manages the status of the application and has a dispatch(action) function. It is like a brain responsible for all moving parts in Redux.

1. getState() returns the current state if the store.

conslole.log("store.getState()");        

2. dispatch() dispatches an action. It is the only way to update the application state

Buttonchange: () => dispatch({msg:"Message_change"})        

3. Subscribe() subscribes a change listener to the state. unsubscribe() is useful when you no linger want to call your listener method when the state changes.

const unsubscribe = store.subscribe(handleChange)
unsubscribe()        

Action :- Action is sent or dispatched from the view, which are payloads that Reducers can read. It is a pure object created to store the information of the user’s event. It includes information such as type of action, time of occurrence, location of occurrence, its coordinates, and which state it aims to change.

Reducer :- Reducer reads the payloads from the actions and then updates the store via the state accordingly. It is a pure function to return a new state from the initial state.

Why use Redux?

1. React Redux is the official UI bindings for react Application. It is kept up-to-date with any API changes to ensure that your React components behave as expected
2. It implements many performance optimisations internally, which allows to components re-render only when it actually needs.

3. It encourages good ‘React’ architecture.

The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state in your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.

Redux Libraries & Tools.

1. React-Redux :- Redux can integrate with any UI framework and is most frequently used with React. React-Redux is our official package that lets your React components interact with a Redux store by reading pieces of state and dispatching actions to update the store.
2. Redux Toolkit :- Redux Toolkit is our recommended approach for writing Redux logic. It contains packages and functions that are essential for building a Redux app. Redux Toolkit builds in our suggested best practices, simplifies most Redux tasks, prevents common mistakes, and makes it easier to write Redux applications.
3. Redux DevTools Extension :- The Redux DevTools Extension shows a history of the changes to the state in your Redux store over time. This allows you to debug your applications effectively, using powerful techniques like “time-travel debugging.”

Pros and Cons of Redux

Summary

Redux is a library for managing global application state

• Redux is typically used with the React-Redux library for integrating Redux and React together
• Redux Toolkit is the recommended way to write Redux logic

Redux uses a “one-way data flow” app structure

• State describes the condition of the app at a point in time, and UI renders based on that state
• When something happens in the app:

The UI dispatches an action

The store runs the reducers, and the state is updated based on what occurred

The store notifies the UI that the state has changed

• The UI re-renders based on the new state

Redux uses several types of code

• Actions are plain objects with a type field, and describe "what happened" in the app
• Reducers are functions that calculate a new state value based on previous state + an action
• A Redux store runs the root reducer whenever an action is dispatched