Redux

folder Projet: test_react_project

Créer une application React en utlisant Redux permettant de gérer le compte bancaire d'un client

reduces/NavBarReducer.js
import { createSlice } from "@reduxjs/toolkit"
const initialState={nom:"ABC",solde:10000}
export const NavBarReducer = createSlice({
    name: 'info',
    initialState,
    reducers: {
     payer:(state,action)=>{
         state.solde-=action.payload //récupérer la valeur envoyer par le dispatcher
     },
     modifierInfo:(state,action)=>{
        state.nom=action.payload.nom;
        state.solde=action.payload.solde

    },

    },
})
// Action creators are generated for each case reducer function
export const { payer,modifierInfo } = NavBarReducer.actions

export default NavBarReducer.reducer

store/store.js
import { configureStore } from '@reduxjs/toolkit'
import NavBarReducer from '../reducer/NavBarReducer'

//store contient la State Globale de l'application
export const store = configureStore({
  reducer: {
      info:NavBarReducer,    
  },
})
components/NavBar.js
import React from "react"
import { useSelector } from "react-redux"
export default function NavBar(){
const info=useSelector((state)=>(state.info))
    return(
        <table style={{background:'#aaa',width:'100%'}}>
            <tr style={{width:'100%'}}>
                <td>Nom: <b>{info.nom}</b></td>
                <td>Solde:<b>{info.solde} $</b> </td>
            </tr>
        </table>
    )

}
App.js
import logo from './logo.svg';
import './App.css';

import NavBar from './components/NavBar';
function App() {
  return (
    <div className="App">
      <NavBar/>
     
    </div>
  );
}

export default App;

index.js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import { store } from './store/store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <Provider store={store}>
 <App />
  </Provider>,
  document.getElementById('root')
)
components/Payement.js
import React, { useState } from "react"
import { useDispatch } from "react-redux"
import { payer } from "../reducer/NavBarReducer";
import {addDepense} from '../reducer/FooterReducer'
export default function Payement()
{
    const [montant,setMontant]=useState(0)
    const dispatch=useDispatch();
    const getValue=(e)=>{
        setMontant(e.target.value)
    }
    const valider=()=>
    {
        if(montant>0)
        {
            dispatch(payer(montant))
            dispatch(addDepense(montant))
        }

    }
    return(
        <div>
            <table style={{width:'100%',background:'#886688'}}>
                <tr style={{width:'100%'}}>
                    <td>Montant à payer:</td>
                    <td><input type="number" name="monant" onChange={getValue} style={{width:'100%'}} defaultValue='0' /></td>
                    <td><button onClick={valider}>Valider</button></td>
                </tr>
            </table>
        </div>
    )
}
App.js
import logo from './logo.svg';
import './App.css';

import NavBar from './components/NavBar';
import Payement from './components/Payement';
import { BrowserRouter, Link, Route,Routes } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <NavBar/>
      <BrowserRouter>
  <table style={{background:'#aa8814',width:'100%'}}>
    <tr style={{width:'100%'}}>
      <td><Link to="/payement">payement</Link></td>
      <td><Link to="modidierInfo">Modifier Info</Link></td>
    </tr>
  </table>
 
      <Routes>
        <Route path="/payement" element={<Payement />} />
      </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

components/ModifierInfo.js
import React, { useState } from "react"
import { useDispatch, useSelector } from "react-redux"
import {modifierInfo} from '../reducer/NavBarReducer'
export default function ModifierInfo()
{
    const info=useSelector((state)=>state.info)
    const dispatch=useDispatch();
    const [infos,setInfos]=useState({nom:info.nom,solde:info.solde})
 
    const getValue=(e)=>{
        setInfos(preveInfo=>({
        ...preveInfo,
        [e.target.name]:e.target.value
        }))
    }

    const valider=()=>{
     dispatch(modifierInfo(infos))
    }
    return(
        <div>
        <table style={{width:'100%',background:'#aaaa88'}}>
            <tr style={{width:'100%'}}>
                <td>Changer le nom:</td>
                <td><input type="text"name="nom" defaultValue={infos.nom} onChange={getValue} style={{width:'100%'}} /></td>
                <td><input type="number"name="solde" defaultValue={infos.solde} onChange={getValue} style={{width:'100%'}} /></td>
                <td><button onClick={valider}>Valider</button></td>
            </tr>
        </table>
    </div>
    )
}

App.js
import logo from './logo.svg';
import './App.css';

import NavBar from './components/NavBar';
import Payement from './components/Payement';
import ModifierInfo from './components/ModifierInfo';
import { BrowserRouter, Link, Route,Routes } from 'react-router-dom';

function App() {
  return (
    <div className="App">
      <NavBar/>
      <BrowserRouter>
  <table style={{background:'#aa8814',width:'100%'}}>
    <tr style={{width:'100%'}}>
      <td><Link to="/payement">payement</Link></td>
      <td><Link to="modidierInfo">Modifier Info</Link></td>
    </tr>
  </table>
 
      <Routes>
        <Route path="/payement" element={<Payement />} />
        <Route path="/modidierInfo" element={<ModifierInfo />} />
      </Routes>
      </BrowserRouter>

    </div>
  );
}

export default App;

reduces/FooterReducer.js

On a besoin d'un FooterReducer car il contient la variable de state TotaleDepense qu'on veut la partager avec les autres components

import { createSlice } from "@reduxjs/toolkit"
const initialState={TotaleDepense:0}
export const FooterReducer = createSlice({
    name: 'footer',
    initialState,
    reducers: {
     addDepense:(state,action)=>{
         state.TotaleDepense+=parseFloat(action.payload) //récupérer la valeur envoyer par le dispatcher
     },
     

    },
})
// Action creators are generated for each case reducer function
export const { addDepense } = FooterReducer.actions

export default FooterReducer.reducer

components/Footer.js
import { useSelector } from "react-redux"

export default function Footer()
{
    const info=useSelector((state)=>state.info)
    const footer=useSelector((state)=>state.footer)
    return (
        <div>
            <table style={{width:'100%'}}>
                <tr style={{width:'100%'}}>
                  <td>Nom:{info.nom}</td>
                  </tr>
                  <tr>
                   <td>Solde:{info.solde} $</td>
                </tr>
                <tr>
                    <td>TotaleDepense : {footer.TotaleDepense} $</td>
                </tr>
            </table>
        </div>
    )
}

store/store.js
import { configureStore } from '@reduxjs/toolkit'
import FooterReducer from '../reducer/FooterReducer'
import NavBarReducer from '../reducer/NavBarReducer'

//store contient la State Globale de l'application
export const store = configureStore({
  reducer: {
 
    info:NavBarReducer,
    footer:FooterReducer
   
  },
})

App.js
import logo from './logo.svg';
import './App.css';

import NavBar from './components/NavBar';
import Payement from './components/Payement';
import ModifierInfo from './components/ModifierInfo';
import { BrowserRouter, Link, Route,Routes } from 'react-router-dom';
import Footer from './components/Footer';



function App() {
  return (
    <div className="App">
      <NavBar/>
      <BrowserRouter>
  <table style={{background:'#aa8814',width:'100%'}}>
    <tr style={{width:'100%'}}>
      <td><Link to="/payement">payement</Link></td>
      <td><Link to="modidierInfo">Modifier Info</Link></td>
    </tr>
  </table>
 
      <Routes>
        <Route path="/payement" element={<Payement />} />
        <Route path="/modidierInfo" element={<ModifierInfo />} />
      </Routes>
      </BrowserRouter>
<div style={{position:'fixed',left:'0px',bottom:'0px',background:'#aaa',color:'#222',width:'100%',textAlign:"left"}}>
      <Footer />
      </div>
    </div>
  );
}

export default App;