Проблема с использованием значения Redux в компоненте

Question

Значение реквизита Redux не отображается в модальном компоненте

Привет, у меня возникли некоторые проблемы с использованием значения реквизита с редуксом. В итоге мое приложение отображается в списке предстоящих футбольных матчей. Когда вы нажимаете на одном из них отображается модальный режим, который позволит вам ввести результат матча в 2 поля ввода с метками, которые динамически отображают названия команд (т. е. зависит от того, на каком предстоящем матче вы нажмете)

Это matchResultInputForm с реквизитом из магазина приставок

#

MatchResultInput

#

state = {
        resultInputForm: {
            teamAScore: {
                elementType: 'input',
                label: this.props.teamAName,
                elementConfig: { 
                    type: 'text',
                    placeholder: ''
                },
                value: '',
                validation: {
                    required: true,
                    minLength: 1
                },
                valid: false,
                touched: false
            },
            teamBScore: {
                ....same as above
    }


    render(){
        const formElementsArray = [];
        for(let key in this.state.resultInputForm){
            formElementsArray.push({
                id: key,
                config: this.state.resultInputForm[key]
            });
        }

        let matchResultInputForm = (
            <form onSubmit={this.addMatchResult}>
                {formElementsArray.map(formElement => (
                    <Input
                        key={formElement.id}
                        elementType={formElement.config.elementType}
                        label={formElement.config.label}
                        elementConfig={formElement.config.elementConfig}
                        value={formElement.config.value}
                        invalid={!formElement.config.valid}
                        shouldValidate={formElement.config.validation}
                        touched={formElement.config}
                        changed={(event) => this.inputChangedHandler(event, formElement.id)} />
                    )
                )}
                <Button btnType="Success" clicked={this.props.resultSubmitted}>ADD MATCH RESULT</Button>
                <Button btnType="Danger" clicked={this.props.resultInputCancel}>CANCEL</Button>
            </form>
        );


const mapStateToProps = state => {
    return {
        matchID: state.upcomingMatches.selectedMatchForUpd.matchID,
        teamAName: state.upcomingMatches.selectedMatchForUpd.teamAName,
        teamBName: state.upcomingMatches.selectedMatchForUpd.teamBName,
        teamAScore: state.upcomingMatches.selectedMatchForUpd.teamAScore,
        teamBScore: state.upcomingMatches.selectedMatchForUpd.teamBScore,
        redirectPath: state.upcomingMatches.redirectPath
    }
}

#

Это из метода рендеринга в компоненте upcomingMatches

#

render() {
        let matchResultInput = null;

        let upcomingmatches = <p style={{textAlign: 'center'}}>Loading...!</p>;
        if(!this.props.loading && !this.props.error){
            upcomingmatches = this.props.upcmgMatches.map(upcomingMatch => {
                    return <UpcomingMatch
                        key={upcomingMatch.id}
                        teamA={upcomingMatch.teamA}
                        teamB={upcomingMatch.teamB}
                        matchKickoff={upcomingMatch.matchKickoff}
                        clicked={() => this.addInputMatchResultHandler(upcomingMatch.id, upcomingMatch.teamA, upcomingMatch.teamB)}
                    />
            });
        }


    addInputMatchResultHandler = (id, teamAName, teamBName, teamAScore, teamBScore) => {
        this.props.onAddMatchResultInit( id, teamAName, teamBName, teamAScore, teamBScore);
    }

    matchDispatchToProps with upcoming Matches

    const mapDispatchToProps = dispatch => {
    return {
        onFetchUpcomingMatches: () => dispatch(actions.fetchUpcomingMatches()),
        onAddMatchResultInit: (matchID, teamAName, teamBName, teamAScore, teamBScore ) => dispatch(actions.initAddMatchResult(matchID, teamAName, teamBName, teamAScore, teamBScore)),
        onInputMatchResult: (matchID, teamAName, teamBName, teamAScore, teamBScore) => dispatch(actions.addMatchResult(matchID, teamAName, teamBName, teamAScore, teamBScore))
    }
}

#

Из ближайшего магазина Спичек

#

export const initAddMatchResult = ( matchID, teamAName, teamBName, teamAScore, teamBScore  ) => {
    return {
        type: actionTypes.INIT_MATCH_RESULT_INPUT,
        matchID: matchID,
        teamAName: teamAName,
        teamBName: teamBName,
        teamAScore: teamAScore,
        teamBScore: teamBScore,
        addingMatchResult: true
    };
}

#

От с upcmgMatches редуктор

#

const initAddMatchResult = ( state, action ) => {
    return updateObject( state, {
        selectedMatchForUpd: {
            matchID: action.matchID,
            teamAName: action.teamAName,
            teamBName: action.teamBName,
            teamAScore: action.teamAScore,
            teamBScore: action.teamBScore
        },
        inputtingResult: true
    } );
}

Метод updateObject - это просто общий компонент, используемый для обновления состояния. Я не включил это, потому что это, кажется, работает. Когда я открываю инструменты redux dev в браузере Chrome, я вижу, что состояние обновлено, как и следовало ожидать, например,

teamAName (pin-код): 'Команда A жестко закодирована' => 'Англия'

Однако модал MatchResulInput по-прежнему отображает значение «Team A hardcoded», которое является начальным состоянием, жестко закодированным в редукторе, как показано ниже (Я жестко закодировал это для целей отладки) ..

const initialState = {
    upcmgMatches: [],
    loading: false,
    redirectPath: '/',
    selectedMatchForUpd: {
        matchID: null,
        teamAName: "Team A hardcoded",
        teamBName: "Team B hardcoded",
        teamAScore: null,
        teamBScore: null
    },
    inputtingResult: false
}