Hi Guys, In this react redux tutorial we will teach you the basic of of how Redux application works. Using Redux in React is easy when you have a simple guide. We will show a step-by-step example by creating a todo list app.
What is Redux?
Redux is an open-source JavaScript library for managing application state. It is most commonly used with libraries such as React or Angular for building user interfaces. It was created by Dan Abramov and Andrew Clark.
Install Packages
To use redux in our react project. We need two packages redux and react-redux. React-redux is a special package to allow redux in react project.
Run below two commands to install packages
npm install redux --save
npm install react-redux --save
Now we have those two package ready. Now it’s time to create a simple program
Open App.js file and create a program to incress and decress value
import React from 'react'; import './App.css'; class App extends React.Component { state = { experience: 7 } onExperienceUp = () => { this.setState({ experience: ++this.state.experience }) } onExperienceDown = () => { this.setState({ experience: --this.state.experience }) } render() { return ( <div className="App"> <div>Current Expirence: {this.state.experience}</div> <button onClick={this.onExperienceUp}>UP</button> <button onClick={this.onExperienceDown}>Down</button> </div> ); } } export default App;
In the above example, You will see the “7” as default experience and then you will get “UP” and “DOWN” button to increase and decrease the experience. Right now this example simple store data in current component state now we will move to Store all data on “Redux” Store to access this value everywhere.
Next, We will create store.
What is Store?
A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it.
To create a store, you would need two things state and reducer. Reducer is nothing but it is a simple function. To create store. Create a new file called “reducer.js” under store folder. Below is the example reducer.js file
const initialState = { experience: 7 } const reducer = (state = initialState, action) => { const newState = {...state}; if(action.type === 'EXPERIENCE_UP') { newState.experience++; } if(action.type === 'EXPERIENCE_DOWN') { newState.experience--; } return newState; } export default reducer;
The “initialState” is our application state. Where all value will be store.
The “reducer” is a reducer which is able to change the ” initialState”.
Next, Let’s connect our application with “Redux”.
Now we have reducer. Remember the store has to be global. The store has to be done at highest level. And highest level of React application is “index.js”. So open the “index.js” file and do the following changes
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { Provider } from 'react-redux'; import { createStore } from 'redux'; import reducer from '../src/store/reducer'; const store = createStore(reducer); ReactDOM.render( <React.StrictMode> <Provider store={store}> <App /> </Provider> </React.StrictMode>, document.getElementById('root') ); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
Now store is available to the entire application, Let’s see above changes
The <Provider />
makes the Redux store
available to any nested components that have been wrapped in the connect()
function. In the simple terms the “Provider” allows us to inject the global store.
The “createStore ” allow us to create the store.
Next, Open the App.js file and do the following changes to access the Redux store.
import React from 'react'; import './App.css'; import { connect } from 'react-redux'; class App extends React.Component { render() { return ( <div className="App"> <div>Current Experience: {this.props.experience}</div> <button onClick={this.props.onExperienceUp}>UP</button> <button onClick={this.props.onExperienceDown}>Down</button> </div> ); } } const mapStateToProps = (state) => { return { experience: state.experience } }; const mapDispatchToProps = ( dispatch ) => { return { onExperienceUp: () => dispatch({type: 'EXPERIENCE_UP'}), onExperienceDown: () => dispatch({type: 'EXPERIENCE_DOWN'}), } }; export default connect(mapStateToProps, mapDispatchToProps)(App);
Now, Everything is ready, Your application will look like this

I’ve been struggling for months trying to understand the Redux store. I understood bits and pieces, and had to copy and paste code to complete assignments. Now I actually understand what is going on with Provider, store, reducer, and connect. Thank you.
I like the efforts you have put in this, thank you for all the great content. https://local-auto-locksmith.co.uk/vw/
I really like looking at and I believe this website got some really useful stuff on it! https://local-auto-locksmith.co.uk/services/
Sprawdź ranking na chwilówka przez internet i weź szybką pożyczkę internetową lub kredyt przez internet. https://chwilowki-pozyczka.pl/
Wonderful work! This is the type of info that are meant to be shared across the internet. Bobbee Kenny Jeramey
A round of applause for your article. Thanks Again. Great. Josy Erin Nahamas