Chapter 11: Redux

Introduction to Redux
 
Redux is a state management library for JavaScript applications. It helps you manage global state by providing a single source of truth for state and a predictable, scalable way to update state.
Core Concepts
 
Redux has three core concepts:
1. Store: The store is the central location that holds the entire state of the application.
2. Actions: Actions are payloads that trigger state changes. They are typically JavaScript objects that describe what happened in the application.
3. Reducers : Reducers are pure functions that take the current state and an action, and return a new state.
Installing Redux
 
To install Redux, run the following command in your terminal:

npm install redux react-redux
Creating a Store
 
To create a store, you use the `createStore` function from Redux.
import { createStore } from 'redux';
const initialState = {
 counter: 0,
};
const reducer = (state = initialState, action) => {
 switch (action.type) {
   case 'INCREMENT':
     return { counter: state.counter + 1 };
   default:
     return state;
 }
};
const store = createStore(reducer);
In this example, we create a store with an initial state and a reducer that handles the `INCREMENT` action.
Connecting React to Redux
 
To connect React to Redux, you use the `Provider` component from `react-redux`.
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './App';
ReactDOM.render(
 <Provider store={store}>
   <App />
 </Provider>,
 document.getElementById('root')
);
In this example, we wrap the `App` component with the `Provider` component and pass the store as a prop.
Dispatching Actions
 
To dispatch actions, you use the `dispatch` function from the store.
import React from 'react';
import { useDispatch } from 'react-redux';
function Counter() {
 const dispatch = useDispatch();
 return (
   <div>
     <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
   </div>
 );
}
In this example, we dispatch the `INCREMENT` action when the button is clicked.
Example Code
 
Here's an example of a simple React app that uses Redux:
 
import React from 'react';
import { createStore } from 'redux';
import { Provider, useDispatch, useSelector } from 'react-redux';
const initialState = {
 counter: 0,
};
const reducer = (state = initialState, action) => {
 switch (action.type) {
   case 'INCREMENT':
     return { counter: state.counter + 1 };
   default:
     return state;
 }
};
const store = createStore(reducer);
function Counter() {
 const dispatch = useDispatch();
 const counter = useSelector((state) => state.counter);
 return (
   <div>
     <p>Counter: {counter}</p>
     <button onClick={() => dispatch({ type: 'INCREMENT' })}>Increment</button>
   </div>
 );
}
function App() {
 return (
   <Provider store={store}>
     <Counter />
   </Provider>
 );
}
 
Here's a practice exercise:
Create a simple React app that uses Redux to manage a todo list.
Hint: Use the `createStore` function to create a store, and the `Provider` component to connect React to Redux. Use the `useDispatch` and `useSelector` hooks to dispatch actions and select state.