Faced TypeError: Невозможно прочитать свойство 'counter' из undefined при использовании Redux в React

Question

Я новичок в Redux и изучал, как правильно использовать его в React. Но проблема, с которой я столкнулся, заключается в следующем: «TypeError: Невозможно прочитать свойство counter« undefined ». Вот код, который я использую: я новичок в Redux и узнал, как правильно использовать его в React. Но проблема, с которой я столкнулся, заключается в следующем: «TypeError: Невозможно прочитать свойство counter« undefined ». Вот код, который я использую:

reducer.js
    >     
    >         const initialState = {
    >           counter: 0
    >         };
    >         
    >         const reducer = (state = initialState, action) => {
    >           if (action.type === "INCREMENT") {
    >             counter: state.counter + 1;
    >           }
    >         };
    >         
    >         export default reducer;

Counter.js
    >     
    >         import React, { Component } from "react";
    >         import { connect } from "react-redux";
    >         
    >         import CounterControl from "../../components/CounterControl/CounterControl";
    >         import CounterOutput from "../../components/CounterOutput/CounterOutput";
    >         
    >         class Counter extends Component {
    >           counterChangedHandler = (action, value) => {
    >             switch (action) {
    >               case "inc":
    >                 this.setState(prevState => {
    >                   return { counter: prevState.counter + 1 };
    >                 });
    >                 break;
    >               case "dec":
    >                 this.setState(prevState => {
    >                   return { counter: prevState.counter - 1 };
    >                 });
    >                 break;
    >               case "add":
    >                 this.setState(prevState => {
    >                   return { counter: prevState.counter + value };
    >                 });
    >                 break;
    >               case "sub":
    >                 this.setState(prevState => {
    >                   return { counter: prevState.counter - value };
    >                 });
    >                 break;
    >             }
    >           };
    >         
    >           render() {
    >             return (
    >               <div>
    >                 <CounterOutput value={this.props.ctr} />
    >                 <CounterControl
    >                   label="Increment"
    >                   clicked={() => this.props.onIncrement}
    >                 />
    >                 <CounterControl
    >                   label="Decrement"
    >                   clicked={() => this.counterChangedHandler("dec")}
    >                 />
    >                 <CounterControl
    >                   label="Add 5"
    >                   clicked={() => this.counterChangedHandler("add", 5)}
    >                 />
    >                 <CounterControl
    >                   label="Subtract 5"
    >                   clicked={() => this.counterChangedHandler("sub", 5)}
    >                 />
    >               </div>
    >             );
    >           }
    >         }
    >         
    >         const mapStateToProps = state => {  //here it shows an error
    >           return { ctr: state.counter };
    >         };
    >         
    >         const mapDispatchToProps = dispatch => 
    >           return {
    >             onIncrement: () => dispatch({ type: "INCREMENT" })
    >           };
    >         };
    >         
    >         export default connect(
    >           mapStateToProps,
    >           mapDispatchToProps
    >         )(Counter);

index.js
    >     
    >         import React from "react";
    >         import ReactDOM from "react-dom";
    >         import "./index.css";
    >         import App from "./App";
    >         import registerServiceWorker from "./registerServiceWorker";
    >         import { createStore } from "redux";
    >         import reducer from "./store/reducer";
    >         import { Provider } from "react-redux";
    >         
    >         const store = createStore(reducer);
    >         ReactDOM.render(
    >           <Provider store={store}>
    >             <App />
    >           </Provider>,
    >           document.getElementById("root")
    >         );
    >         registerServiceWorker();

Answer 1

Я вижу одну возможную проблему в вашем определении редуктора (возможную синтаксическую ошибку), попробуйте изменить ее следующим образом:

const reducer = (state = initialState, action) => {
    if (action.type === "INCREMENT") {
        return {
            ...state,
            counter: state.counter + 1
        };        
    }
    return state;
};