使用 Redux 更改道具后重新加载渲染问题? [英] Reload render issue after change props using Redux?

问题描述

我在我的应用中使用了 redux.只有一种状态是定义.我可以更改状态并渲染屏幕.但是每当我更改状态道具时，我都无法重新加载屏幕.

I use the redux in my apps. there is only one state is define. I can change the state and render the screen. but whenever i change state props I can't reload the screen.

代码:

action-types.js

export const SET_NOTIFICATION = "SET_NOTIFICATION";

action.js

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

let initialState = {
    notyIndex: 0,
};

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

reducer.js

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

我按如下方式连接 redux.DashBoard.js

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

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

********* LIFE CYCLE START ************

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

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

********* LIFE CYCLE END ************

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

- 如上代码，在设置值后调用 no one 生命周期方法.

谢谢.

推荐答案

首先在使用 redux 的 Method 时必须调用

First when you use redux's Method you must call with

this.props.setNotyIndex(1);

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

and When you use redux's veriable in your component you must have you use

this.props.notyIndex

您可以在 ma​​pStateToProps 方法中进行控制台以获取如下所示的更改

You can console in your mapStateToProps method to get changes like under

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

};

当您更改 redux veriable 并且如果您在代码中使用该 veriable 时，相关组件会重新渲染它.但是如果有一些问题，那么你可以在 redux 方法调用之后通过菜单调用 setState，就像在

When you change your redux veriable and if you use that veriable in your code then relative component rerender it selt. But if there some issue then you can call setState menually after redux method calling, like under

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

});

我希望它对你有用......

I hope it work for you.......

这篇关于使用 Redux 更改道具后重新加载渲染问题?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！