Компонент Redux не рендерится после уменьшения состояния

Question

У меня проблема с компонентом, который не рендерился после отправки действия. Даже в инструменте Dux. Действие и состояние работают как положено. Но он (App.js) просто не будет перерисовываться (после запуска действия DATE_ClickChange ).

Ниже приведены коды. Пожалуйста, помогите мне с этим вопросом. Спасибо.

Это index.js

import React, { Component } from "react";
import ReactDOM from "react-dom";
import "./index.scss";
import "bootstrap/dist/css/bootstrap.min.css";

import App from "./components/App/App";
import { Provider } from "react-redux";
import store from "./store";

class Index extends Component {
  render() {
    return (
      <Provider store={store}>
        <div className="indexStyle">
          <App />
        </div>
      </Provider>
    );
  }
}

ReactDOM.render(<Index />, document.getElementById("index"));

store.js

import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers/rootReducer";

const initialState = {};

const middleware = [thunk];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

export default store;

rootReducer.js

import { combineReducers } from "redux";
import weatherReducer from "./weatherReducer";
import dateReducer from "./dateReducer";

export default combineReducers({
  weatherData: weatherReducer,
  dateData: dateReducer
});

dateReducer.js

import { DATE_HandlChange, DATE_ClickChange } from "../actions/types";
import moment from "moment";

const initialState = {
  startDate: moment()
};

export default (state = initialState, action) => {
  switch (action.type) {
    case DATE_HandlChange:
      return {
        startDate: action.payload.startDate
      };
    case DATE_ClickChange:
      return {
        ...state,
        startDate: action.payload.startDate
      };
    default:
      return state;
  }
};

dateAction

import { DATE_HandlChange, DATE_ClickChange } from "./types";

export const dateHandleChange = date => dispatch => {
  dispatch({
    type: DATE_HandlChange,
    payload: {
      startDate: date
    }
  });
};

export const dateClickChange = number => (dispatch, getState) => {
  dispatch({
    type: DATE_ClickChange,
    payload: {
      startDate: getState().dateData.startDate.add(number, "d")
    }
  });
};

App.js

import React, { Component } from "react";
import "./app.scss";
import "react-datepicker/dist/react-datepicker.css";
import DatePicker from "react-datepicker";
import { Button } from "reactstrap";

import Content from "../Content/Content";

import { connect } from "react-redux";
import {
  dateHandleChange,
  dateClickChange } from "../../actions/dateAction";

class App extends Component {
  render() {
    return (
      <div className="mainPanel">
        <div className="datePanel">
          <Button
            outline
            onClick={() => this.clickChange(-1)}
            color="info"
            className="prevDate"
            size="md"
          >
            Previous
          </Button>
          <DatePicker
            dateFormat="YYYY/MM/DD"
            selected={this.props.dateData}
            onChange={date => this.props.dateHandleChange(date)}
            className="dateInput"
          />
          <Button
            outline
            onClick={() => this.props.dateClickChange(1)}
            color="info"
            className="nextDate"
            size="md"
          >
            Next
          </Button>
        </div>
        <Content />
      </div>
    );
  }
}

const mapStateToProps = state => ({
  dateData: state.dateData.startDate
});

export default connect(
  mapStateToProps,
  { dateHandleChange, dateClickChange }
)(App);

Answer 1

Я не совсем уверен, но похоже, что вы изменяете состояние непосредственно с помощью этого кода startDate: getState().dateData.startDate.add(number, "d")

getState () не возвращает копию состояния, насколько я знаю. Это означает, что вы должны сначала сделать его копию. Вероятно, поэтому он не будет перерисовываться. Redux не рендерится, когда вы изменяете состояние напрямую. Вы никогда не должны изменять состояние напрямую. Относитесь к нему как к неизменному, сначала сделайте копию, а не изменяйте состояние. =)