State Management

State Management with Context API

State management is crucial for developing dynamic web applications. The Context API in React allows you to manage global state that can be accessed by any component in your application. Here, we'll demonstrate how to set up and use the Context API for state management in "Startup."

Setting Up Context

First, let's create a context file that will contain our global state and the functions to update it:

1// StateContext.js
2import React, { createContext, useContext, useReducer } from 'react';
3
4// Define the initial state
5const initialState = {
6  count: 0,
7  user: null,
8};
9
10// Create a context
11const StateContext = createContext();
12
13// Create a reducer to handle state updates
14const reducer = (state, action) => {
15  switch (action.type) {
16    case 'INCREMENT':
17      return { ...state, count: state.count + 1 };
18    case 'DECREMENT':
19      return { ...state, count: state.count - 1 };
20    case 'SET_USER':
21      return { ...state, user: action.payload };
22    default:
23      return state;
24  }
25};
26
27// Create a context provider component
28const StateProvider = ({ children }) => {
29  const [state, dispatch] = useReducer(reducer, initialState);
30
31  return (
32    <StateContext.Provider value={{ state, dispatch }}>
33      {children}
34    </StateContext.Provider>
35  );
36};
37
38// Create a custom hook for accessing the context
39const useStateValue = () => {
40  const context = useContext(StateContext);
41  if (!context) {
42    throw new Error('useStateValue must be used within a StateProvider');
43  }
44  return context;
45};
46
47export { StateProvider, useStateValue };

Using the Context Provider

Wrap your entire application with the StateProvider to make the global state available to all components:

1// App.js
2import React from 'react';
3import { StateProvider } from './StateContext';
4import Counter from './Counter';
5import User from './User';
6
7function App() {
8  return (
9    <StateProvider>
10      <div className="App">
11        <h1>State Management with Context API</h1>
12        <Counter />
13        <User />
14      </div>
15    </StateProvider>
16  );
17}
18
19export default App;

Accessing and Modifying State

Now, you can easily access and modify the global state in any component using the useStateValue hook:

1// Counter.js
2import React from 'react';
3import { useStateValue } from './StateContext';
4
5function Counter() {
6  const { state, dispatch } = useStateValue();
7
8  const increment = () => {
9    dispatch({ type: 'INCREMENT' });
10  };
11
12  const decrement = () => {
13    dispatch({ type: 'DECREMENT' });
14  };
15
16  return (
17    <div>
18      <h2>Counter</h2>
19      <p>Count: {state.count}</p>
20      <button onClick={increment}>Increment</button>
21      <button onClick={decrement}>Decrement</button>
22    </div>
23  );
24}
25
26export default Counter;

1// User.js
2import React from 'react';
3import { useStateValue } from './StateContext';
4
5function User() {
6  const { state, dispatch } = useStateValue();
7
8  const setUser = () => {
9    dispatch({ type: 'SET_USER', payload: { name: 'John Doe' } });
10  };
11
12  return (
13    <div>
14      <h2>User</h2>
15      <p>User: {state.user ? state.user.name : 'Not logged in'}</p>
16      <button onClick={setUser}>Set User</button>
17    </div>
18  );
19}
20
21export default User;

Conclusion

The Context API in React, as demonstrated in this example, provides a powerful way to manage global state in your "Startup" front-end applications. By using the StateProvider and the useStateValue hook, you can efficiently handle and share state among different components, enabling you to build dynamic and interactive web applications with ease.