Adding Redux in Simple React Web Application - PART 1 [ create Store and UseSelector Hook ]

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) => {

    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 } from 'react-redux'

function App() {

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

  console.log(state)

  return (

    <div>

      Hello Redux ..

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

      {state.name}

    </div>

  );

}

export default App;

Video Links : Part 1