How to use React Context with React-Redux ?
React context with React-Redux is a popular state management library for React applications. Using React context with React-Redux is a powerful way to provide the Redux store to components deep within your component tree without manually passing it down through props.
Prerequisites
Approach:
- First, define a Redux store with a simple counter reducer to manage the state.
- Utilize React-Redux to connect Redux with React components.
- Create a context provider to make the Redux store available throughout the component tree.
- Use the useContext hook to access the Redux store within components.
- Dispatch actions to update the Redux state directly from React components.
Steps to Setup the Project:
Step 1: Create a reactJS application by using this command
npx create-react-app my-app
Step 2: Navigate to the project directory
cd my-app
Step 3: Install the necessary packages/libraries in your project using the following commands.
npm install react-redux redux
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.0",
"react-scripts": "5.0.1",
"redux": "^5.0.1",
"web-vitals": "^2.1.4"
},
Example: Implementation to show how to use react context with react redux using counter example.
// Counter.js
import React, { useContext } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import CounterContext from './CounterContext';
const Counter = () => {
const store = useContext(CounterContext);
const count = useSelector(state => state.count);
const dispatch = useDispatch();
const handleIncrement = () => {
dispatch({ type: 'INCREMENT' });
};
const handleDecrement = () => {
dispatch({ type: 'DECREMENT' });
};
return (
<div>
<button onClick={handleDecrement}>-</button>
<span>{count}</span>
<button onClick={handleIncrement}>+</button>
</div>
);
};
export default Counter;
// store.js
import { createStore } from 'redux';
const initialState = {
count: 0,
};
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return {
...state,
count: state.count + 1,
};
case 'DECREMENT':
return {
...state,
count: state.count - 1,
};
default:
return state;
}
};
const store = createStore(counterReducer);
export default store;
// App.js
import React from 'react';
import Counter from './components/Counter';
import CounterProvider from './components/CounterProvider';
const App = () => {
return (
<CounterProvider>
<div>
<h1>Counter App</h1>
<Counter />
</div>
</CounterProvider>
);
};
export default App;
// CounterContext.js
import { createContext } from 'react';
const CounterContext = createContext(null);
export default CounterContext;
// CounterProvider.js
import React from 'react';
import { Provider } from 'react-redux';
import store from '../store';
import CounterContext from './CounterContext';
const CounterProvider = ({ children }) => {
return (
<CounterContext.Provider value={store}>
<Provider store={store}>
{children}
</Provider>
</CounterContext.Provider>
);
};
export default CounterProvider;
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Step to Run Application: Run the application using the following command from the root directory of the project
npm start
Output: Your project will be shown in the URL http://localhost:3000/
Contact Us