javascript - 在道具从 redux 操作更改后，React 类组件不会重新渲染

问题描述

在 redux 中成功更新状态后组件没有重新渲染我试图在 componentShouldUpdate 中做一些条件最终加载 true 而没有改变

减速器.js

 import * as types from "./actionsType";

    const INITIAL_STATE = {
       slide_data: [],
       error: null,
       loading: false,
    };

        const updateObject = (oldObject, updatedProperties) => {
           return {
         ...oldObject,
        ...updatedProperties,
      };
    };
const slideReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case types.SLIDES_FETCH_START:
      return updateObject(state, {
        error: null,
        loading: true,
      });
    case types.SLIDES_FETCH_SUCSSES:
      return updateObject(state, {
        slide_data: action.payload,
        error: null,
        loading: false,
      });
    case types.SLIDES_FETCH_FAIL:
      return updateObject(state, {
        error: action.error,
        loading: false,
      });
    default:
      return state;
  }
};

export default slideReducer;

动作.js

import * as types from "./actionsType";
import axios from "axios";
import { selectSlides } from "./slides.selectors";
export const slidesStart = () => {
  return {
    type: types.SLIDES_FETCH_START,
  };
};

export const slidesSucces = (slides) => {
  return {
    type: types.SLIDES_FETCH_SUCSSES,
    payload: slides,
  };
};

export const slidesFail = (error) => {
  return {
    type: types.SLIDES_FETCH_FAIL,
    error: error,
  };
};

export const fetchSlides = () => {
  return (dispatch) => {
    console.log("fetch Start");
    dispatch(slidesStart());
    axios
      .get("http://127.0.0.1:8000/slides/", {
        headers: {
          "Content-Type": "application/json",
        },
      })
      .then((res) => {
        dispatch(slidesSucces(res.data));
      })
      .catch((err) => dispatch(slidesFail(err)));
  };
};

零件

class IntroPage extends Component {
  constructor(props) {
    super(props);
    this.tlitRef = React.createRef();
    this.titlelRef = React.createRef();
    this.subTitleRef = React.createRef();
    this.showcase = React.createRef();
  }

componentDidMount() {
    this.props.fetchSlides();
}

  render() {
    const { slides, loading } = this.props;
    if (loading) {
      return <h1>Loading</h1>;
    }
    return (
      <div className="intro">
       
           
            <div className="wrapper">
              {slides.map((data) => (
                <SwiperSlides data={data} key={data.name} />
              ))}
            </div>
        
        

        
      </div>
    );
  }
}

    const mapStateToProps = (state) => {
      return {
        loading: state.slides.loading,
        error: state.slides.error,
        slides: state.slides.slide_data,
      };
    };
    
    const mapDispatchToProps = (dispatch) => {
      return {
        fetchSlides: () => dispatch(fetchSlides()),
      };
    };
    export default connect(mapStateToProps, mapDispatchToProps)(IntroPage);

正确注册 redux-logger。数据已返回，但当我执行 redux-persist 并尝试重新加载数据时没有任何变化

更新 :: 当我更改浏览器数据的大小时，它会正确显示这是什么！！

标签： javascriptreactjsredux

javascript - 在道具从 redux 操作更改后，React 类组件不会重新渲染

问题描述

解决方案

推荐阅读