Redux mapStateToProps не работает

Question

Когда компонент изменяется с помощью действия Redux, кажется, что вводится ques и напоминание изменилось. Однако при импорте в mapStateToProps из другого компонента значение не изменяется и вводится только пустое значение. Зачем? Это мой github

компоненты / Vote

import { combineReducers } from 'redux';
import { INFOMATION } from "../actions";

const postInitialState ={
    id: '',
    ques: '',
    ans1: '',
    ans2: ''
};


const postInfomation = (state = postInitialState, action) => {
switch (action.type) {
    case INFOMATION:
        console.log(state)
        return Object.assign({}, state, {
            id: action.id,
            ques: action.ques,
            ans1: action.ans1,
            ans2: action.ans2
        });
    default:
        return state
    }
};



const postApp = combineReducers({
    postInfomation
});

export default postApp;

редуктор / голос

import React, {Component, Fragment} from 'react';
import { connect } from 'react-redux';

class Vote extends Component {
    render() {
        return (
            <Fragment>
                <h1>qwe</h1>
                <h1>{this.props.id}</h1>
                <h1>{this.props.ques}</h1>
            </Fragment>
        )
    }
}

let mapStateToProps = (state) => {
    console.log(state)
    return {
        id: state.postInfomation.id,
        ques: state.postInfomation.ques,
        ans1: state.postInfomation.ans1,
        ans2: state.postInfomation.ans2
    };
}

Vote = connect(mapStateToProps) (Vote);

export default Vote;

Answer 1

Ваш код работает, но при посещении страницы /vote ваше приложение перезагружается, и состояние повторно инициализируется. Вы можете определить это с помощью Redux Devtools , который показывает вызов @@INIT при навигации.

Если вы добавите <Link to="/vote">Vote</Link> для перехода к маршруту /vote, вы заметите, что состояние остается. Если вы используете HashRouter, у вас не будет этой проблемы, потому что браузер не перезагрузит страницу.

-

Обратите внимание, что с логикой состояния у вас больше проблем. Каждый раз, когда пользователь обновляет одно из ваших полей ввода, вы обновляете хранилище редуксов и ваше локальное состояние. Но когда пользователь впоследствии отправляет форму, вы обновляете только идентификатор локального состояния, этот идентификатор переводится в состояние избыточности только в том случае, если пользователь снова меняет одно из полей ввода.

Я бы обновлял состояние редукса только после отправки формы. Держите значения в местном состоянии до этого времени. Также переместите ваш аксиос вызов в службу, которую вы вызываете с помощью действия redux-thunk.