In this article, we'll use Context API as State Management in our React App, same can be used in React Native app.
Context allows data to be passed down the component tree without having to pass props manually at every level.
Context is primarily used for sharing data that is global to the entire application.
Biggest advantage of using of Context is ease of onboarding into existing or new codebase without any unwanted boilerplate code. Redux comes with lot of boilerplate code and difficult to integrate.
How to Use the Context API for State Management
Step 1: Create a Context
export const AppStateContext = createContext()
Here AppStateContext is Context value used across the app. You can create multiple context for different parts of state. For now, lets stick with only one.
Step 2: Create a Provider
const AppStateProvider = (props) => {
const [state, setState] = useState({isLoggedIn: false})
const reducer = (action) => {
}
return (
<AppStateContext.Provider value={[state, reducer]}>
{props.children}
</AppStateContext.Provider>
)
}
Here we are making state and reducer values made available in all the components which consume this Context.
state
will contain the app state (with default value as isLoggedIn = false), while reducer
is function which will update state and it accepts action as a argument.
Now wrap up your app component at Root level, so that all components can access this Context.
return (
<AppStateProvider>
<HomeScreen />
</AppStateProvider>
)
Step 3: Consume context in Components.
const HomeScreen = () => {
const [state, reducer] = useContext(AppStateContext);
return (
<div className="App">
<header className="App-header">
Is User Logged In : {state.isLoggedIn}
</header>
</div>
)
}
Step 4: Add update state logic in reducer
const reducer = (action) => {
let updatedState;
switch (action.type) {
case 'toggleLogin':
updatedState = {
...state,
isLoggedIn: !state.isLoggedIn
}
}
setState(updatedState);
}
Modify reducer function to accept action and update state. Here action object contain type
which is used to differentiate between different actions and data
as payload. for ex - pass data as api response
Step 5: Update state from component
const HomeScreen = () => {
const [state, reducer] = useContext(AppStateContext);
const loginNow = () => {
reducer({type: 'toggleLogin'})
}
return (
<div className="App">
<header className="App-header">
Is User Logged In : {state.isLoggedIn}
<button onClick={loginNow}>Login</button>
</header>
</div>
)
}
Voila! You have a working app state management mechanism. You can follow same steps for React Native as well.
Top comments (0)