How to Implement Redux in React

What is Redux?

Redux is a predictable state container for JavaScript apps. It has a single Store and can not have multiple Stores. It divides the Store into various state objects.

What is React?

1) React is aJavaScriptlibrary created byFacebook

2) React is aUser Interfacelibrary

3) React is a tool for buildingUI components

What is a Store?

A store holds the whole state tree of your application.

A store has the following responsibilities:

1) Holds whole application state

2) Allow access to state via getState();

3) Allow the state to be updated via dispatch(action)

What are Reducers?

Reducers specify how the application’s state changes in response to actions sent to the store.

What are the Actions?

Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.

Installation of Redux with React-

Installation includes three steps and to make it easy to understand I have explained below through codes/ command which I have worked on while working on my project. I have created three files index.js, app.js and reducer.js to explain it in a simple way. To understand in deep please read the commands I have worked on.

commands-

npm install -g create-react-appcreate-react-app react-with-redux-implementnpm install --save redux react-redux

Below given code is an example to show how redux is implemented with React.

Index.js

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App';import * as serviceWorker from './serviceWorker';import { createStore } from 'redux';import { Provider } from 'react-redux';import appState from './reducers/reducer'; const store = createStore(appState, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());ReactDOM.render(  <Provider store={store}>    <App/>  </Provider>, document.getElementById('root'));serviceWorker.unregister();

App.js

import React from 'react';import './App.css';import { connect } from 'react-redux'; function App(props) {  return (    <div className="app" style={{textAlign:"center"}}>      <h1>React and Redux Example</h1>      <h3>This Value is Reducer State Value: <span style={{color:"gray"}}>{props.name}</span></h3>      <button onClick={ ()=>{ props.hanldeChange("Era") }}>Change It</button>    </div> );} const mapStateToProps = (state) => {  return {    name: state.name  }} const mapDispatchToPorps = (dispatch) => {  return {    hanldeChange:(name) => {      dispatch({type:"CHANGE_NAME", payload: name})    }}} export default connect(mapStateToProps, mapDispatchToPorps)(App);

Reducer js

const isState = {  name: "Rock",  wishes: ["code", "game"]} const reducer = (state=isState, action) => {  if(action.type === 'CHANGE_NAME'){    return {      ...state,      name: action.payload    }  }  return state;} export default reducer;

Conclusion-

Through the above codes and examples, I want to explain how you can implement and connect redux and react in a simple way. This will help you to solve coding in an easy way. If you have any queries please feel free to ask your doubts or connect with me through leaving your doubts & queries in the comment section below.