React / Redux Не удается обновить начальное состояние / неопределенная проблема

Question

Я пытаюсь обновить свое состояние и получить его для визуализации.

Ниже я вызываю свое состояние из файла reducer.js и отображаю начальный список в порядке.

<div className={classes.resultborder}>
                {this.props.transInput.map(data => {
                    return (
                        <Inputs
                            key={data.id}
                            xParty={data.xParty}
                            zParty={data.zParty}
                            yAction={data.yAction}
                            amount={data.amount}
                            deleteItem={() => this.deleteItem(data.id)}/>
                    );
                })}
            </div>

Внизу моего родительского приложения у меня есть

const mapStateToProps = state => {
    return {
        transInput: state.transactionInputs
    };
};

const mapDispatchToProps = dispatch => {
    return {
        submitResults: () => dispatch({type: 'SUBMIT', x: {
            xParty: 'Henry',
            yAction: 'Funds',
            zParty: 'Elizbath'
        }})
    };
};

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

Я жестко запрограммировал свой submitResults, потому что я еще не смог обновить свое состояние и отображение, это для простоты.

Я звоню submitResults в кнопке

submitResults={this.props.submitResults}

Теперь ниже находится весь мой редуктор

const initialReducer = {

    transactionInputs: [
        {id: 1, xParty: "statePaul", yAction: "Funds", zParty: "stateSandra", amount: 100},
        {id: 2, xParty: "stateEmily", yAction: "Loans", zParty: "stateJohn", amount: 200},
        {id: 3, xParty: "stateMatt", yAction: "Repays", zParty: "stateMicheal", amount: 300},
    ],
    emptyInputs: false,
    toggle: false
};

const reducer = (state = initialReducer, action) => {

    console.log(initialReducer.transactionInputs);

    if(action.type === 'SUBMIT'){
        return{
            ...state,
            xParty: state.xParty.concat(action.x)
        }
    }
    return state;
};

export default reducer;

Когда я нажимаю кнопку te для запуска submitResults, я получаю следующую ошибкусообщение TypeError: Cannot read property 'concat' of undefined

Я хочу иметь возможность обновить свое начальное состояние и отобразить его (в настоящее время я верю, что если мне удастся обновить исходное состояние, то дисплей снова будет хорошо отрисовываться).

Я не совсем уверен, почему это не работает, но я верю, что в моем файле reducer.js есть кое-что, чтобы узнать, как я возвращаю свое состояние.

Я принимаю любые предложения.

Answer 1

В файле reducer.js под типом действия 'SUBMIT' у меня был следующий код:

 if(action.type === 'SUBMIT'){
        return{
            ...state,
            xParty: state.xParty.concat(action.x)
        }
    }
    return state;

Но у меня есть ошибка со строкой ...state,, и теперь яиметь ...state.transactionInputs,

if(action.type === 'SUBMIT'){
    return{
         ...state.transactionInputs,
         transactionInputs: state.transactionInputs.concat(action.x)
    };
}

ПОБОЧНОЕ ПРИМЕЧАНИЕ

Когда я пытался выяснить, в чем дело, я использовал console.log(initialReducer.transactionInputs) дляПосмотрите, обновлялось ли состояние, но я убедился, что получаю начальное состояние, а не текущее, которое было состоянием.Так что для console.log, который я должен использовать console.log(state.transactionInputs);, я бы решил это гораздо раньше.

Просто примечание:)