Reactjs 使用Redux更改道具后重新加载渲染问题？

我在应用程序中使用redux。定义的状态只有一个。我可以更改状态并渲染屏幕。但是每当我改变状态道具时，我就不能重新加载屏幕

代码：

动作类型.js

export const SET_NOTIFICATION = "SET_NOTIFICATION";

import {
    SET_NOTIFICATION,
} from "./action-types";

let initialState = {
    notyIndex: 0,
};

export const setNotyIndex = (notyIndex) => ({type: SET_NOTIFICATION, notyIndex});

import {
    SET_NOTIFICATION,
} from "./action-types";

let initialState = {
    notyIndex: 0,
};

export default reducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_NOTIFICATION:
            return Object.assign({}, state, {notyIndex: action.notyIndex});
            break;
        default:
            return initialState;
            break;
    }
};

import { setNotyIndex } from "./action";
import {connect} from "react-redux"

action.js

export const SET_NOTIFICATION = "SET_NOTIFICATION";

import {
    SET_NOTIFICATION,
} from "./action-types";

let initialState = {
    notyIndex: 0,
};

export const setNotyIndex = (notyIndex) => ({type: SET_NOTIFICATION, notyIndex});

import {
    SET_NOTIFICATION,
} from "./action-types";

let initialState = {
    notyIndex: 0,
};

export default reducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_NOTIFICATION:
            return Object.assign({}, state, {notyIndex: action.notyIndex});
            break;
        default:
            return initialState;
            break;
    }
};

import { setNotyIndex } from "./action";
import {connect} from "react-redux"

reducer.js

export const SET_NOTIFICATION = "SET_NOTIFICATION";

import {
    SET_NOTIFICATION,
} from "./action-types";

let initialState = {
    notyIndex: 0,
};

export const setNotyIndex = (notyIndex) => ({type: SET_NOTIFICATION, notyIndex});

import {
    SET_NOTIFICATION,
} from "./action-types";

let initialState = {
    notyIndex: 0,
};

export default reducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_NOTIFICATION:
            return Object.assign({}, state, {notyIndex: action.notyIndex});
            break;
        default:
            return initialState;
            break;
    }
};

import { setNotyIndex } from "./action";
import {connect} from "react-redux"

我连接redux，如下所示。DashBoard.js

export const SET_NOTIFICATION = "SET_NOTIFICATION";

import {
    SET_NOTIFICATION,
} from "./action-types";

let initialState = {
    notyIndex: 0,
};

export const setNotyIndex = (notyIndex) => ({type: SET_NOTIFICATION, notyIndex});

import {
    SET_NOTIFICATION,
} from "./action-types";

let initialState = {
    notyIndex: 0,
};

export default reducer = (state = initialState, action) => {
    switch (action.type) {
        case SET_NOTIFICATION:
            return Object.assign({}, state, {notyIndex: action.notyIndex});
            break;
        default:
            return initialState;
            break;
    }
};

import { setNotyIndex } from "./action";
import {connect} from "react-redux"

*********生命周期开始************

 componentWillMount(){
  console.log('Call update');
  console.log('Index is',this.props.notyIndex);
 }

 shouldComponentUpdate=()=>{
    return true
  }
 componentDidUpdate=(prevProps, prevState, snapshot)=>{
    console.log('Call update');
    console.log('Index is',this.props.notyIndex);
  }

 componentDidMount() {
     console.log('Call update');
     console.log('Index is',this.props.notyIndex);
  }

const mapDispatchToProps = (dispatch) => {
  return {
      setNotyIndex: (notyIndex) => dispatch(setNotyIndex(notyIndex)),
  }
};

const mapStateToProps = (state) => {
    if (state === undefined) {
        return {};
    }
    return {
        notyIndex: state.notyIndex,
    }
};


connect(mapStateToProps, mapDispatchToProps)(DashBoard);

*********生命周期结束************

 componentWillMount(){
  console.log('Call update');
  console.log('Index is',this.props.notyIndex);
 }

 shouldComponentUpdate=()=>{
    return true
  }
 componentDidUpdate=(prevProps, prevState, snapshot)=>{
    console.log('Call update');
    console.log('Index is',this.props.notyIndex);
  }

 componentDidMount() {
     console.log('Call update');
     console.log('Index is',this.props.notyIndex);
  }

const mapDispatchToProps = (dispatch) => {
  return {
      setNotyIndex: (notyIndex) => dispatch(setNotyIndex(notyIndex)),
  }
};

const mapStateToProps = (state) => {
    if (state === undefined) {
        return {};
    }
    return {
        notyIndex: state.notyIndex,
    }
};


connect(mapStateToProps, mapDispatchToProps)(DashBoard);

值设置为。

setNotyIndex(1);

-如上所述，对设置值后调用的无人生命周期方法进行编码。

setNotyIndex(1);

---

谢谢。

首先，当您使用redux的方法时，必须使用

this.props.setNotyIndex(1);

当您在组件中使用redux的veriable时，您必须使用

this.props.notyIndex

您可以在MapStateTops方法中进行控制台操作，以获得如下所示的更改

const mapStateToProps = (state) => {
console.log("State veriable : ", state)
if (state === undefined) {
    return {};
}
return {
    notyIndex: state.notyIndex,
}

this.props.setNotyIndex(1);
this.setState({

})

当您更改redux veriable时，如果您在代码中使用该veriable，则相对组件会自动重新加载它。但如果有一些问题，那么您可以在redux方法调用之后调用setState，如

const mapStateToProps = (state) => {
console.log("State veriable : ", state)
if (state === undefined) {
    return {};
}
return {
    notyIndex: state.notyIndex,
}

this.props.setNotyIndex(1);
this.setState({

}))

---

我希望它对您有用……

请添加您的组件code@MotiKorets实际上，我已经在代码中添加了生命周期的所有方法，没有调用一个方法。他指的是您调用

setNotyIndex

的组件。是否调用了

setNotyIndex

操作或

SET\u通知

reducer？@MotiKorets您可以看到我的代码中使用的生命周期方法。@riwu我在按钮事件中调用了setNotyIndex。