web-dev-qa-db-ja.com

Reactフックでreduxの状態が変化したときに、小道具が更新されない

React HooksプロジェクトにReduxを実装しようとしていますが、うまく機能していないようです。ここで何か問題がありますか？

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
        })
    }
}

成分

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

また、Header関数の教育プロパティは、initialStateのように常に空の配列です。ブラウザーでRedux Devtoolsを確認すると、状態にこれらの2つのオブジェクトが配列で含まれていることがわかります。 enter image description here

したがって、redux状態を変更するかどうかに関係なく、コンポーネントのプロパティはinitialStateのままです。

reactjsreduxreact-reduxstate
7
Ertan Hasani

このように書かれたレデューサーで試すことができます：

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

私がこれをタイプしている間にあなたはこれを解決したようです-役立つかもしれないので、それを関係なく投稿することにしました。

次の例では、Christopher Ngoがすでに述べたことに加えて、ストアと対話して新しい教育を作成し、それらを個別のコンポーネントで表示する方法の概要を示します。

Edit modest-fermat-98s0r

乾杯！

0
Matt Oestreich

リデューサーで状態を変更しているようです。何かが更新された場合、レデューサーは常に新しい状態オブジェクトを返す必要があります。

上記の答えが示唆することを行うことができますが、イマー（ https://www.npmjs.com/package/immer ）またはimmutable.jsなどのパッケージを使用して、バグを防ぐことをお勧めしますライン。状態オブジェクトにいくつかの深くネストされたプロパティがあり、特にアプリのサイズが大きくなっているときに何かを誤って変更していないことを100％確認するのが難しい場合、spread構文の使用は危険です。

0
Matt Wills