Redux is a predictable state management library for JavaScript applications, often used with libraries like React or Angular. It helps you manage the state of your application in a consistent and predictable way. Here’s a brief overview of its core concepts:
What is Redux?
- Redux is a state management library that works with JavaScript applications.
- It provides a central store for managing state and enforces a unidirectional data flow.
Core Concepts of Redux
1. State
The state is the single source of truth in a Redux application. It represents the entire state of your app in a single JavaScript object.
2. Actions
- Actions are plain JavaScript objects that describe changes or events that happen in your application. Each action has a
typeproperty and can have additional data (payload) if needed. - Example:
{
type: 'ADD_TODO',
payload: {
text: 'Learn Redux'
}
}
3. Reducers
- Reducers are functions that specify how the state changes in response to an action. They take the current state and an action as arguments and return a new state.
- Example:
function todosReducer(state = [], action) {
switch (action.type) {
case 'ADD_TODO':
return [...state, action.payload];
default:
return state;
}
}
4. Store
- The store is an object that holds the application state. It provides methods to get the current state, dispatch actions, and subscribe to state changes.
- You create a store using the
createStorefunction from Redux. - Example:
import { createStore } from 'redux';
const store = createStore(todosReducer);
5. Dispatch
- The
dispatchmethod is used to send actions to the store. This triggers the reducer to update the state based on the action. - Example:
store.dispatch({
type: 'ADD_TODO',
payload: { text: 'Learn Redux' }
});
6. Middleware
- Middleware provides a way to extend Redux’s abilities, such as handling asynchronous actions or logging. Redux Thunk and Redux Saga are popular middleware for handling side effects.
