Adding Redux in Simple React Web Application - PART 2 [ Dispatching Actions ]

 Install Packages : npm i redux react-redux

 Step 1 : Create store.js file below App.js 

import { createStore } from "redux";

let counterReducer = (state = { value: 10, name: 'pradeep' }, action) => {

    if (action.type === 'ADD') {

        return { ...state, value: state.value + action.payload }

    }

    if (action.type === 'NAME') {

        return { ...state, name: action.payload }

    }

    return state

}

let store = createStore(counterReducer)

export default store

Step 2 : Add the following Code in index.js File 

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import reportWebVitals from './reportWebVitals';

import { Provider } from 'react-redux'

import store from './store'

ReactDOM.render(

  <React.StrictMode>

    <Provider store={store}>

      <App />

    </Provider>

  </React.StrictMode>,

  document.getElementById('root')

);

// If you want to start measuring performance in your app, pass a function

// to log results (for example: reportWebVitals(console.log))

// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

reportWebVitals();

3. And finally App.js Code

import { useSelector, useDispatch } from 'react-redux'

function App() {

  let dispatch = useDispatch()

  let state = useSelector((state) => state)

  console.log(state)

  return (

    <div>

      Hello Redux ..

      <p>{state.value}</p>

      {state.name}

      <button onClick={() => {

        dispatch({ type: 'ADD', payload: 2 })

      }} >ADD</button>

      <button onClick={() => {

        dispatch({ type: 'NAME', payload: 'hello' })

      }} >ShghgUB</button>

    </div>

  );

}

export default App;

Video Links :  Part 2