Реактивный редуктор работает, но после прохождения веб-страницы становится неопределенным

Question

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

Код в следующем файле выглядит следующим образом

import React, { Component } from "react";
import Hook from "../../hooks/display";
import { connect } from "react-redux";
import * as actionTypes from "../../store/actions";

import "./main.css";

class Main extends Component {
  componentDidMount() {
    console.log(this.props.stateName);
    this.props.console_inside();
    console.log("hey");
  }

  render() {

    return (
      <div>
        <h1>The container view (page)</h1>
        <Hook />
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    stateName: state.inside_reducer
  };
};

const mapDispatchToProps = dispatch => {
  return {
    console_inside: () => dispatch({ type: actionTypes.DO_SOMETHING_1 })
  };
};

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

и в моем редукторе.js

import * as actionTypes from "./actions";

const initialState = {
  persons: [],
  inside_reducer: "I am inside of a reducer"
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.DO_SOMETHING_1:
      console.log(state.inside_reducer);
      return 1;
    case actionTypes.DO_SOMETHING_2:
      return 1;
  }
  return state;
};

export default reducer;

Вопросы будут

1) Почему при втором входе на страницу написано неопределенное?

P.S: не уверен, что это важно, но на всякий случай проблема здесь В моем index.js

import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import { createStore } from "redux";
import { Provider } from "react-redux";
import reducer from "./store/reducer";

const store = createStore(reducer);

const app = (
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);
ReactDOM.render(app, document.getElementById("root"));

Answer 1

Я вполне уверен, что это потому, что вы устанавливаете свое состояние равным 1, а не возвращаете то, что хотите, чтобы новое состояние было!

1.inside_reducer, действительно, будет неопределенным.

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

return {
  ...state,
  inside_reducer: 'reduced'
}

вместо этого в обоих ваших случаях.

Answer 2

Вы никогда не вернете свой штат

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actionTypes.DO_SOMETHING_1:
      console.log(state.inside_reducer);
      return state ; // <==== You must return your state instead of 1
    case actionTypes.DO_SOMETHING_2:
      return state ; // <==== You must return your state instead of 1
  }
  return state;
};