Projets react redux :

Demarrage du projets : npm run start //front end

Le serveur : npm run server//back end

Le principe de redux est basé sur trois etapes :

On a :
Les actions : liant user à la base de donné
Les reducers : permettant de stocker les états
dans le store
Le store : enregistre les états
Voici le schéma :
Le composant react redux : Le provider
Nous devons appeler ce composant d’abord dans
index.js car ceci contient tous nos états dans le store de
redux qui va englober tous les composantes

import React from "react";

import ReactDOM from "react-dom";
import App from "./App";
import "./styles/index.scss";
import { Provider } from "react-redux";

ReactDOM.render(
<Provider>
 <App />
</Provider>
,
document.getElementById("root"));

Configuration du store
On est obliger de créer un reducer au debut
Devtools est utiliser pour visualiser le store dans chrome
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({
reducer: rootReducer,
devTools,
})
ReactDOM.render(
<Provider store={store}>

A retenir :
Pour coder avec le redux dans react il faudrait importer
et utiliser la composante Provider comme le montre ce
resume de code :
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from './reducer'

const store = configureStore({

reducer: rootReducer,
devTools:true,
})
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
,
Les réduceurs
Cet import recupère tous les reducers depuis le dossier
reducers
import rootReducer from './reducer'

voici notre premier reducer user

const initialState = {
user: "From Scratch"
};

export default function userReducer(state= initialState, action){

//swicth
}

Qui est importé dans index

Donc est manipulable par tous dans le provider de
react :

import { combineReducers } from "@reduxjs/toolkit";

import userReducer from "./user.reducer";

export default combineReducers({

// les reducers
userReducer,

})

Donc index vas englober tous nos reducer dans le

dossier reducer
Voici notre premier action :
Le get_post est utiliser pour definir le type de la fonction
export const GET_POSTS = "GET_POSTS"
import axios from 'axios'
export const GET_POSTS = "GET_POSTS"

export const getPosts = ()=>{

return (dispatch)=>{
return axios.get("http://localhost:3000/posts").then((res)=>{
console.log(res)
})

}
}

Après nous allons lister les types de fonctions d’action

comme celle de Get_post
Le déclenchement de l’action :
Ca se passe au niveau de la composante root qui est
dans index.js
Dispacth veut dire ,lance moi telle action

Dans notre actions avons recuperer les données dans

data.json

import axios from 'axios'

export const GET_POSTS = "GET_POSTS"

export const getPosts = ()=>{

return (dispatch)=>{
return axios.get("http://localhost:3000/posts").then((res)=>{
console.log(res);
dispatch(
{
type: GET_POSTS,
payload:res.data
 })
})

}
}

Le post reducer recupera le resulta du getPost selon son

type :
Post.reducer.js
import { GET_POSTS } from "../actions/post.action";

const initialState = {

};

export default function postReducer(state= initialState, action){

//swicth
switch(action.type){
case GET_POSTS:
return action.payload;
break;
default:
return state;
}
}

Nous allons recuperer notre data depuis redux et

l’afficher dans app.js
Voici comment nous allons recuperer nos données
depuis redux :
Ici nous recupererons celle de postReducers
const posts = userSelector((state)=> state.postReducer);
console.log(posts)
voici app.js

import React from "react";

import {useSelector} from 'react-redux'
import PostForm from "./components/PostForm";
import User from "./components/User";
import Post from "./components/Post"
import {isEmpty} from './components/Utils'

const App = () => {

const posts = useSelector((state)=> state.postReducer);

console.log(posts)

return (
<div>
<h1>Extreme</h1>
<PostForm />
<div className="content">
<div className="post-container">

{!isEmpty(posts) && posts.map((post, index)=> <Post post={post}

key={index} />)}

</div>
<User />
</div>
</div>
);
};

export default App;

Avec le useSelector
On peut recuperer les data depuis n’importe ou
import { useSelector } from "react-redux";
 et l’utiliser comme suite :
const user= useSelector((state)=>state.userReducer)

Le coté ajouter , supprimer et modifier dans la base de

donnée :

Pour l’ajout
Nous allons créer une action
export const addPost = (data)=>{
return (dispatch)=>{
return axios.post("http://localhost:3000/posts",data).then((res)=>{
console.log(res);
dispatch(
{
type: ADD_POST,
payload:data
})
})

}
}

Dans le reducer nous allons ajouter à partir de l’action

ou la fonction ajouter qui est addPost

export default function postReducer(state= initialState, action){

//swicth
switch(action.type){
case GET_POSTS:
return action.payload;
case ADD_POST:
return [action.payload,...state]
default:
return state;
}
}
Voici une importance de l’asynchronique
Nous allons faire de sorte que redux attend d’abord
l’ajout à la base de donnée :
const handleForm= async (e)=>{
e.preventDefault();
console.log(form)
const postData = {
author: user.pseudo,
title: form.current[0].value,
content: form.current[1].value,
likes:0
};
await dispatch(addPost(postData));
dispatch(addPost(postData));

form.current.reset();

Voici le formulaire et la fonction ajout appliquer

import React, { useRef } from "react";

import { useDispatch, useSelector } from "react-redux";
import { addPost } from "../actions/post.action";

const PostForm = () => {

const form = useRef();
const user = useSelector((state)=> state.userReducer)
const dispatch = useDispatch()
const handleForm= async (e)=>{
e.preventDefault();
console.log(form)
const postData = {
author: user.pseudo,
title: form.current[0].value,
content: form.current[1].value,
likes:0
};
await dispatch(addPost(postData));
dispatch(addPost(postData));

form.current.reset();
}
 return (
<div className="form-container">
<form ref={form} onSubmit={e=> handleForm(e)}>
<input type="text" placeholder="Titre du poste" />
<textarea placeholder="Postez vos pensées..."></textarea>
<input type="submit" value="Envoyer" />
</form>
</div>
);
};

export default PostForm;

Modification avec redux

case EDIT_POST:
return state.map((post)=>{
if(post.id=== action.payload.id){
return {
...post,
content:action.payload.content
}
}

Ici le content recupère ce qui est à modifier , on a pas

precisé
content:action.payload.content

Mais si c’était le titre par exemple , ce serait

Titre : Nouveau_valeur