Вот проблемы, с которыми вы сталкиваетесь
в ActionCreator
у вас есть этот код
import * as Types from "./Types";
export const incCounter = state => ({
Type: Types.INC_COUNTER,
payload: state++
});
правильный должен быть
import * as Types from "./Types";
export const incCounter = state => ({
type: Types.INC_COUNTER,
payload: state
});
Type должно быть type, и вам не нужно увеличивать состояние здесь, что должно происходить в редукторе.
в counterReducer у вас есть
export const counterReducer = (state = counterInitialState, action) => {
switch (action.Type) {
case Types.INC_COUNTER:
return { ...state, state: action.payload++ };
default:
return state;
}
};
правильный код должен быть
export const counterReducer = (state = counterInitialState, action) => {
switch (action.type) {
case Types.INC_COUNTER:
return {...state, counter: ++action.payload};
default:
return {...state};
}
};
Опять же, Type должно быть type, и перед назначением состояния должно произойти приращение, action.payload++ неверно, оно должно быть ++action.payload
в index.js
у вас есть это
const mapDispatchToProps = state => ({
updateCounter: () => incCounter(state)
});
, который должен быть
const mapDispatchToProps = dispatch => ({
updateCounter: state => dispatch(incCounter(state))
});
Наконец, у вас есть
<button onClick={incCounter(props.currentCounter)}>Update counter</button>
которое должно быть
<button onClick={props.updateCounter.bind(null, props.currentCounter)}>Update counter</button>
Вы не хотите выполнять функцию, вы хотите передать функцию как обработчик щелчков, и если вы хотите передать ей какой-либо аргумент, вы можете связать ее с помощью функции bind. Просто будьте осторожны с первым аргументом, переданным bind =>, это контекст выполнения, а не первый аргумент функции, ваш аргумент идет вторым.
Рабочий код можно найти здесь. https://codesandbox.io/s/8nyjxvp2k9