Task 21: Context and useReducer Together

[yogeshtakeo]

Task: State Management with Context API and useReducer in a React Application

Objective: Explore state management in a React application using the Context API and the useReducer hook.

Task Description:

In this task, you will create a React application that effectively manages state using the Context API and the useReducer hook. The objective is to understand how to centralize and handle complex application-wide state efficiently.

Exercise 1: Set Up the React Project

1. Create a new React project using a tool like create-react-app or Vite.
2. Ensure you have a development environment set up.

Exercise 2: Create Contexts

1. Within your project, create two separate contexts, UserContext.js and ThemeContext.js.
2. In UserContext.js, define a context for user-related information (e.g., username, email, login status).
3. In ThemeContext.js, define a context for managing the application's theme (e.g., light and dark themes).

Exercise 3: Implement useReducer

1. Inside the context files (UserContext.js and ThemeContext.js), import useReducer from React.
2. Define a reducer function for handling state updates. Consider the types of actions you need to manage in each context.
3. Initialize the state for each context using the useReducer hook and the reducer function.

Exercise 4: Create Actions and Dispatch

1. Within the context files, create action types (constants or strings) that represent the different actions you need to handle (e.g., LOGIN, LOGOUT, TOGGLE_THEME, UPDATE_THEME).
2. Create action functions that correspond to these action types.
3. Use the dispatch function from useReducer to send actions to the reducer.

Exercise 5: Implement Consumer Components

1. In your React application, create components that consume data from the UserContext and ThemeContext using the useContext hook.
2. Use the data provided by these contexts to render content in your application, such as displaying user information and applying themes.

Exercise 6: Test and Demonstrate

1. Run your React application to test the contexts.
2. Ensure that the user and theme states are effectively managed by the Context API and useReducer.
3. Demonstrate the functionality of your application, such as logging in and out, changing themes, and showing user-specific information.

Exercise 7: Additional Functionality (Optional)

1. As an optional extension, add more features to your application that leverage the centralized state management provided by Context API and useReducer.
2. This could include tasks like handling data fetching, form submissions, or other state-dependent operations.

Submission:

1. Create a GitHub repository for your React project containing the context files, consumer components, and other relevant code.
2. Include a README.md file with explanations and examples for each exercise.
3. Share the repository link for evaluation.

Note: The goal of this task is to demonstrate the effective use of Context API and useReducer for managing state within a React application. You may choose to expand this application to include more complex state management scenarios based on the objectives of your course.

[shantibasnet]

Shanti Basnet [Task 21: Context and useReducer Together] URL:https://github.com/shantibasnet/ContextApi

[Narayanadhikari9]

Name: Narayan Adhikari Task 21: Context and useReducer Together GitHub URL: https://github.com/Narayanadhikari9/context-and-useReducer-together/tree/main/Desktop/Context%20and%20useReducer