Redux is a predictable state container for JavaScript apps to reduce the apps complexity. in other words Redux is a pattern and library for managing and updating application state, using events called “actions”
- Redux is Flux like libraries. and Redux is based on Flux
- Redux was created by Dan Abramov and Andrew Clark
- Redux provides a way to provide the data that React will use to create the UI.
Purpose of Redux
Redux was designed to tackle the challenge of under‐ standing how data changes flow through your application. in other words Redux provides many patterns and tools that make it easier to understand when, where, why, and how the state in your application is being updated
When Should we Use Redux ?
- Redux helps us to deal with shared state management, but like any tool, it has a compromise
Redux become more useful when:
- When we have large amounts of application state that are needed in many places in the app
- The app state is updated frequently over time
- The logic to update that state may be become more complex
- The app has a medium or large-sized codebase, and app has been developed by too many people
Redux Libraries and Tools
- React-Redux:React-Redux is the official package of React-Redux that lets our React components interact with a Redux store by reading pieces of state and dispatching actions to update the store.
- Redux Toolkit:It contains packages and functions that we think are essential for building a Redux app
- Redux DevTools Extension:The Redux DevTools Extension shows a history of the changes to the state in your Redux store over time. This allows us to debug our applications effectively, including using powerful techniques like “time-travel debugging”
Redux Terms and Concepts :
State Management
function Counter() {
// State: a counter value
const [counter, setCounter] = useState(0)
// Action: code that causes an update to the state when something happens
const increment = () => {
setCounter(prevCounter => prevCounter + 1)
}
// View: the UI definition
return (
<div>
Value: {counter} <button onClick={increment}>Increment</button>
</div>
)
}
In the above Example there are following parts are:
- The state, the source of truth that drives our app;
- The view, a declarative description of the UI based on the current state
- The actions, the events that occur in the app based on user input, and trigger updates in the state
What is Immutability in Redux ?
Immutability define that something can never be changed
JavaScript objects and arrays are all mutable by default. so In order to update values immutably, Our code must make copies of existing objects/arrays, and then modify the copies
Example:
const obj = {
a: {
// To safely update obj.a.c, we have to copy each piece
c: 3
},
b: 2
}
const obj2 = {
// copy obj
...obj,
// overwrite a
a: {
// copy obj.a
...obj.a,
// overwrite c
c: 42
}
}
const arr = ['a', 'b']
// Create a new copy of arr, with "c" appended to the end
const arr2 = arr.concat('c')
// or, we can make a copy of the original array:
const arr3 = arr.slice()
// and mutate the copy:
arr3.push('c')
List of All Redux Terminology
- Actions :An action is a plain JavaScript object that has a type field. We can think of an action as an event that describes something that happened in the application.
A typical action object Example
const addTodoAction = {
type: 'todos/todoAdded',
payload: 'Buy milk'
}
- Action Creators :An action creator is a function that creates and returns an action object
Example:
const addTodo = text => {
return {
type: 'todos/todoAdded',
payload: text
}
}
Reducers in Redux ?
Reducers are pure functions that return a new state based on the current state and an action: (state, action) => newState
Example:
const initialState = { value: 0 }
function counterReducer(state = initialState, action) {
// Check to see if the reducer cares about this action
if (action.type === 'counter/increment') {
// If so, make a copy of `state`
return {
...state,
// and update the copy with the new value
value: state.value + 1
}
}
// otherwise return the existing state unchanged
return state
}
- Store :The current Redux application state lives in an object called the store . The store is created by passing in a reducer, and has a method called getState that returns the current state value:
Example:
import { configureStore } from '@reduxjs/toolkit'
const store = configureStore({ reducer: counterReducer })
console.log(store.getState())
// {value: 0}
- Dispatch :The Redux store has a method called dispatch. The only way to update the state is to call store.dispatch() and pass in an action object. The store will run its reducer function and save the new state value inside, and we can call getState() to retrieve the updated value
Example:
store.dispatch({ type: 'counter/increment' })
console.log(store.getState())
// {value: 1}
- Selectors :Selectors are functions that know how to extract specific pieces of information from a store state value. As an application grows bigger, this can help avoid repeating logic as different parts of the app need to read the same data:
Example
const selectCounterValue = state => state.value
const currentValue = selectCounterValue(store.getState())
console.log(currentValue)
// 2