This content originally appeared on DEV Community and was authored by Patrick Lusaya
Hello devs! This is a quick and to-the-point tutorial on how to set up Redux in React.
Given that you've landed on this article, you probably already know the significance of Redux in state management and why it's a vital tool for managing state in your applications.
Follow me on twitter, I'll help you out with something ... I promise.
There's so many ways to do this and here's the way we are gonna go.
On your project's root directory, Run the following command to install the necessary dependencies,
npm install react-redux reduxjs/toolkitOpen your project's
index.jsfile and wrap the<App/>withProviderfromreact-redux
Code:
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider>
<App />
</Provider>
);
reportWebVitals();
<Provider>: Wraps the application in the Redux Provider component, making the Redux store available to all components within the app.
<App />: The main application component that contains the rest of the React components.
- Create a redux store on the Provider you've just added
const store = configureStore({
reducer: Reducer,
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);
Code Explanation:
const store = configureStore({
reducer: Reducer,
});
Here, we are creating a Redux store using the configureStore function from the @reduxjs/toolkit package. The configureStore function simplifies the setup process and comes with sensible defaults. We pass an object with a reducer property to configureStore, specifying the root reducer (Reducer) which handles state updates.
- We have declared the root reducer named
Reducerbut , we have not created one. Do so by creating astore.jsfile from root directory.
Sample code in the index.js:
import { combineReducers } from 'redux';
//-> reducers imports
import AppReducer from "./AppReducer"
import PostReducer from "./PostReducer"
export default combineReducers({
app: AppReducer,
posts:PostReducer
});
Explanaation:
combineReducers: This function from Redux is used to combine multiple reducers into a single root reducer. Each reducer manages its slice of the application state.
AppReducer and PostsReducer: These are example reducers imported from their respective files. Each reducer handles state updates for different parts of the application.
appand posts: These keys represent different slices of the state managed by AppReducer and PostsReducer respectively.
From here, all state updates managed by AppReducer can be accessed in your components using the app key, while updates managed by PostsReducer can be accessed using the posts key
Complete index.js code:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
//redux import
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
//reducer import
import Reducer from './reducers';
//router import
import {BrowserRouter} from "react-router-dom";
const store = configureStore({
reducer: Reducer,
});
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
// Remove BrowserRouter tags if you dont want to use Routing
<BrowserRouter>
<Provider store={store}>
<App />
</Provider>
</BrowserRouter>
);
reportWebVitals();
Complete store.js code:
import { combineReducers } from 'redux';
//-> reducers imports
import AppReducer from "./AppReducer"
import PostsReducer from "./PostsReducer"
export default combineReducers({
app: AppReducer,
posts:PostsReducer
});
Sample Structure of PostReducer.js:
import {FETCH_POSTS_SUCCESS,} from "../actions/Types";
const INITIAL_STATE = {
fetchedPosts:[]
};
const PostReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case FETCH_POSTS_SUCCESS:
return {...state, fetchedPosts: action.payload,};
default:
return state;
}
};
export default PostReducer;
And just like that you're done setting up redux.
If, I've just saved your day follow me on twitter and I'll save you another
Adios !
This content originally appeared on DEV Community and was authored by Patrick Lusaya
Patrick Lusaya | Sciencx (2024-07-19T17:04:30+00:00) How to setup Redux in React Js. Retrieved from https://www.scien.cx/2024/07/19/how-to-setup-redux-in-react-js/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.