Состояние измененного значения в React-Redux не изменяется при изменении

Question

Состояние приложения состоит из 2 независимых состояний, управляемых: modelA, modelB редукторами.Игнорировать modelB.Для modelA у меня есть действие - setInput.Это действие используется в onChange слушателе компонента Whatever для установки inputVal val на любое значение.

Whatever слушатель также должен отображать inputVal, но этого не происходит.Изменения в inputVal не отражаются.

Отладка показывает, что состояние действительно изменено - все, что введено в элемент input в Whatever, сохраняется в этом состоянии.Просто stateToProps маппер больше не вызывается.

Что я делаю не так?

var INPUT = 'INPUT';
var setInput = (val = '') => ({
    type: INPUT,
    payload: val
})

var modelA = (state = {test1: '', test2: false, inputVal: ''}, action) => {
    switch (action.type) {
        case this.INPUT:
            state.inputVal = action.payload;
            return state
        default:
            return state
    }
}
var modelB = (state = {test1: '', content: ''}, action) => {
    switch (action.type) {
        default:
            return state
    }
}

var stateToProps = state => {
    return {
        storeValue: state.modelA.inputVal
    }
}
var dispatchToProps = dispatch => {
    return {
        setStoreVal: (val) => {
            dispatch(setInput(val))
        }
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.store = Redux.createStore(Redux.combineReducers({modelA, modelB}));
    }
    render() {
        return e(
            ReactRedux.Provider, {store:this.store},
                e('div', null, "App", 
                    e(ReactRedux.connect(stateToProps, dispatchToProps)(Whatever), null)
                )
            );
    }
}
class Whatever extends React.Component {
    constructor(props) {
        super(props);
        this.state = {val:0}
        this.listener = this.listener.bind(this);
    }
    listener(evt) {
        this.props.setStoreVal(evt.currentTarget.value);
        this.setState({val:evt.currentTarget.value});
    }

    render() {
        return e(
            'div', null,
            e('p', null, this.props.storeValue),
            e('input', {onChange:this.listener, val:this.state.val})
            );
    }
}

Answer 1

Redux предполагает, что вы никогда не мутируете объекты, которые он вам дает в редуктор. Каждый раз вы должны возвращать новый объект состояния. Четное если вы не используете библиотеку, как Immutable, вам нужно полностью избежать мутации.

Никогда не мутировать аргументы редуктора

var modelA = (state = {test1: '', test2: false, inputVal: ''}, action) => {
    switch (action.type) {
        case this.INPUT:
            return {...state, inputVal: action.payload}; // return new one
        default:
            return state
    }
}