reactjs - 状态减少后 Redux 组件没有重新渲染

问题描述

我有一个问题，即在调度操作后组件没有重新渲染。即使在 redux 开发工具中。动作和状态按预期工作。但是，它（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;
  }
};

日期动作

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")
    }
  });
};

应用程序.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);

标签： reactjsreact-redux

reactjs - 状态减少后 Redux 组件没有重新渲染

问题描述

解决方案

推荐阅读