web-dev-qa-db-fra.com

Les accessoires ne sont pas mis à jour lorsque l'état de redux change dans React Hooks

J'essaie d'implémenter Redux sur un projet React Hooks, mais cela ne semble pas fonctionner correctement. Suis-je en train de faire quelque chose de mal ici?

reducer.js

const initialState = {
    educations: []
};

export default function home(state = initialState, action){
    switch(action.type){
        case GET_EDUCATIONS: {
            state.educations = action.payload;
            return state;
        }
        default:
            return state;
    }
}

action.js

import * as types from '../constans/home';

export const getEducations = () => {
    return dispatch => {
        const edus = [
            {value: 1, name: 'Bachelor'},
            {value: 2, name: "Master"}
        ]

        dispatch({
            type: types.GET_EDUCATIONS,
            payload: edus
        })
    }
}

composant

import React, {useEffect} from 'react';
import {connect} from 'react-redux';
import {getEducations} from '../../redux/actions/home';

function Header({educations, getEducations}) { 
    useEffect(() => {
        getEducations(); //calling getEducations()
    }, [])

    useEffect(() => {
        console.log(educations) //console educations after every change
    })

    return (
        <div className="main-header">
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        educations: state.home.educations
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getEducations: () => { dispatch(getEducations())}
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Header);

Et la propriété education dans la fonction Header est toujours un tableau vide, comme dans initialState. Alors que lorsque je vérifie le navigateur avec Redux Devtools, il montre que l'état contient ces deux objets dans le tableau. enter image description here

Donc, peu importe si je change l'état de redux ou non, les propriétés du composant vont rester comme initialState.

reactjsreduxreact-reduxstate
7
Ertan Hasani

Peut essayer avec le réducteur écrit de cette façon:

const initialState = {
        educations: []
    };

export default function home(state = initialState, action){
    switch(action.type){
        case GET_EDUCATIONS: 
        return {
            ...state, educations:action.payload
        }

        default:
            return state;
    }
}
1
Merci Dieu KIMPOLO

Il semble que vous ayez résolu ce problème pendant que j'obtenais ce texte - j'ai décidé de le publier malgré tout, car cela pourrait être utile.

En plus de ce que Christopher Ngo a déjà mentionné, l'exemple suivant décrit comment vous pouvez interagir avec votre magasin pour créer de nouvelles formations, puis les afficher, dans des composants distincts.

Edit modest-fermat-98s0r

À votre santé!

0
Matt Oestreich

Il semble que vous mutiez l'état dans le réducteur. Le réducteur doit toujours renvoyer un nouvel objet d'état si quelque chose est mis à jour.

Vous pouvez faire ce que les réponses ci-dessus suggèrent, mais je recommanderais d'utiliser un package comme immer ( https://www.npmjs.com/package/immer ) ou immutable.js pour éviter tout bogue dans le ligne. L'utilisation de la syntaxe étendue peut être dangereuse si votre objet d'état possède des propriétés profondément imbriquées, et il est difficile d'être sûr à 100% que vous n'avez pas accidentellement modifié quelque chose, en particulier lorsque votre application grandit.

0
Matt Wills