**Build a Simple Application using Context API for State Management, then Refactor it to Use Redux (Lab Topic)** **Objective:** In this lab topic, you will build a simple application using React Context API for state management. Then, you will refactor the application to use Redux for state management. This will help you understand the differences between Context API and Redux, and how to choose the best state management approach for your application. **Step 1: Building the Application with Context API** Let's build a simple Todo List application using React Context API. We will create a Context API that will manage the application's state. **Step 2.1: Create a Context API** Create a new file called `TodoContext.js` and add the following code: ```jsx import React, { createContext, useState } from 'react'; const TodoContext = createContext(); const TodoProvider = ({ children }) => { const [todos, setTodos] = useState([]); const addTodo = (newTodo) => { setTodos([...todos, newTodo]); }; const removeTodo = (id) => { setTodos(todos.filter((todo) => todo.id!== id)); }; return ( <TodoContext.Provider value={{ todos, addTodo, removeTodo }}> {children} </TodoContext.Provider> ); }; export { TodoContext, TodoProvider }; ``` In this code, we create a Context API called `TodoContext` and a provider component called `TodoProvider`. The provider component uses the `useState` hook to manage the application's state, which is an array of todo items. The provider component also defines two functions: `addTodo` and `removeTodo`, which allow us to add and remove todo items from the state. **Step 2.2: Create a Todo List Component** Create a new file called `TodoList.js` and add the following code: ```jsx import React from 'react'; import { TodoContext } from './TodoContext'; const TodoList = () => { const { todos } = React.useContext(TodoContext); return ( <ul> {todos.map((todo) => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ); }; export default TodoList; ``` In this code, we create a Todo List component that uses the `TodoContext` hook to access the application's state. We map over the todo items in the state and render them as list items. **Step 2.3: Create a Todo Form Component** Create a new file called `TodoForm.js` and add the following code: ```jsx import React from 'react'; import { TodoContext } from './TodoContext'; const TodoForm = () => { const { addTodo } = React.useContext(TodoContext); const handleSubmit = (event) => { event.preventDefault(); const newTodo = { id: Math.random(), title: document.getElementById('title').value, }; addTodo(newTodo); document.getElementById('title').value = ''; }; return ( <form onSubmit={handleSubmit}> <input type="text" id="title" placeholder="Enter a new todo" /> <button type="submit">Add Todo</button> </form> ); }; export default TodoForm; ``` In this code, we create a Todo Form component that uses the `TodoContext` hook to access the `addTodo` function. We define a `handleSubmit` function that adds a new todo item to the state when the form is submitted. **Step 3: Refactor the Application to Use Redux** Now that we have built the application using Context API, let's refactor it to use Redux. **Step 3.1: Create a Redux Store** Create a new file called `store.js` and add the following code: ```jsx import { createStore, combineReducers } from 'redux'; import todosReducer from './todosReducer'; const rootReducer = combineReducers({ todos: todosReducer, }); const store = createStore(rootReducer); export default store; ``` In this code, we create a Redux store using the `createStore` function from the `redux` library. We define a `rootReducer` that combines the `todosReducer` and defines the application's state. **Step 3.2: Create a TodosReducer** Create a new file called `todosReducer.js` and add the following code: ```jsx const initialState = []; const todosReducer = (state = initialState, action) => { switch (action.type) { case 'ADD_TODO': return [...state, action.todo]; case 'REMOVE_TODO': return state.filter((todo) => todo.id!== action.id); default: return state; } }; export default todosReducer; ``` In this code, we create a `todosReducer` that manages the application's state. We define three action types: `ADD_TODO`, `REMOVE_TODO`, and `NONE`. We handle each action type by updating the state accordingly. **Step 3.3: Create a TodoList Component** Create a new file called `TodoList.js` and add the following code: ```jsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { TodoActions } from './TodoActions'; const TodoList = () => { const todos = useSelector((state) => state.todos); const dispatch = useDispatch(); const handleAddTodo = (newTodo) => { dispatch(TodoActions.addTodo(newTodo)); }; const handleRemoveTodo = (id) => { dispatch(TodoActions.removeTodo(id)); }; return ( <ul> {todos.map((todo) => ( <li key={todo.id}>{todo.title}</li> ))} </ul> ); }; export default TodoList; ``` In this code, we create a Todo List component that uses the `useSelector` hook to access the application's state. We use the `useDispatch` hook to dispatch actions to the store. **Step 3.4: Create a TodoForm Component** Create a new file called `TodoForm.js` and add the following code: ```jsx import React from 'react'; import { useSelector, useDispatch } from 'react-redux'; import { TodoActions } from './TodoActions'; const TodoForm = () => { const todos = useSelector((state) => state.todos); const dispatch = useDispatch(); const handleSubmit = (event) => { event.preventDefault(); const newTodo = { id: Math.random(), title: document.getElementById('title').value, }; dispatch(TodoActions.addTodo(newTodo)); document.getElementById('title').value = ''; }; return ( <form onSubmit={handleSubmit}> <input type="text" id="title" placeholder="Enter a new todo" /> <button type="submit">Add Todo</button> </form> ); }; export default TodoForm; ``` In this code, we create a Todo Form component that uses the `useSelector` hook to access the application's state. We use the `useDispatch` hook to dispatch actions to the store. **Conclusion:** In this lab topic, we built a simple application using React Context API for state management. Then, we refactored the application to use Redux for state management. We covered the following key concepts: * Building a Context API for state management * Creating a provider component for Context API * Creating a Todo List component for Context API * Creating a Todo Form component for Context API * Refactoring the application to use Redux * Creating a Redux store for state management * Creating a reducer for Redux state management * Creating a Todo List component for Redux * Creating a Todo Form component for Redux **Practical Takeaways:** * Use Context API for simple state management cases * Use Redux for complex state management cases * Use Redux for global state management * Use Context API for local state management * Use Redux for isolated state management **Questions and Comments:** Please leave a comment or ask for help if you have any questions or need further clarification on any of the concepts covered in this lab topic.