React app using redux (Functional and Class Component)

React primarily provides two ways to manage data i.e. using state or props. When we start coding complex react application where we need to send data from one component to another component then it becomes as huge task as we have to pass props from their common parent component.

Functional Component

Counter.js

import classes from './Counter.module.css';
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'


const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector(state => state.counter);


  const incrementHandler = () => {
    //an action is an object with a type property 
    dispatch({ type: "increment" });
  }

  const decrementHandler = () => {
    dispatch({ type: "decrement" });
  }


  const toggleCounterHandler = () => { };

  return (

    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      <div className={classes.value}>{counter}</div>

      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>



      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>

  );
};

export default Counter;

index.js and index.js/original same as after

Class Component:

Counter.js

import classes from './Counter.module.css';
import React, { Component } from 'react'
import { connect } from 'react-redux'

class Counter extends Component {

  incrementHandler = () => {
    this.props.increment();
  }


  decrementHandler = () => {
    this.props.decrement();
  }


  //with bindf
  // decrementHandler() {
  //   this.props.decrement();
  // }

  toggleCounterHandler() { }


  render() {
    console.log(this.props);
    return (
      <main className={classes.counter}>
        <h1>Redux Counter</h1>
        <div className={classes.value}>{this.props.counter}</div>

        <div>
          <button onClick={this.incrementHandler}>Increment</button>
          <button onClick={this.decrementHandler}>Decrement</button>
          {/* <button onClick={this.incrementHandler.bind(this)}>Increment</button>
          <button onClick={this.decrementHandler.bind(this)}>Decrement</button> */}
        </div>

        <button onClick={this.toggleCounterHandler}>Toggle Counter</button>
      </main>

    );
  }
}



//3tine el state taba3 el redux eb3atha ka props lal component yalle enta fiha
const mapStateToProps = (state) => {
  return {
    //fina nsamia ger counter bas yufadal tetsama bi nafes el esem li bel state / counter
    counter: state.counter
  };
}


const mapDispatchToProps = (dispatch) => {
  return {
    increment: () => dispatch({ type: "increment" }),
    decrement: () => dispatch({ type: "decrement" }),
  }
}

//jib el state men el redux w 3mela connect ma3 el counter
//iza shi wahde mena mawjude het null
// export default connect(null, mapDispatchToProps)(Counter);
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Store/index.js

import { legacy_createStore as createStore } from 'redux'



const counterReducer = (state = { counter: 0 }, action) => {

    if (action.type === "increment") {
        return { counter: state.counter + 1 }
    }
    if (action.type === "decrement") {
        return { counter: state.counter - 1 }
    }
    return state;
}


const store = createStore(counterReducer);

//connect my react app to that store
//provide this store to the react app
export default store;

index.js / origirnal

import React from 'react';
import ReactDOM from 'react-dom/client';
//Provider huwe component
import { Provider } from 'react-redux';

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';



import store from './store/index';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

// 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();