Question

我有此代码：

const mapStateToProps = state => {
  return { language: state.language, user: state.user};
};

function mapDispatchToProps(dispatch) {
  return {
    initConfig: () => dispatch(initConfig())
  };
}

它工作正常，现在我需要添加有关ui的一些信息，并且要做到这一点，我需要映射其他零件对象：

const mapStateToProps = state => {
  return { language: state.language, user: state.user, userSettings: state.userSettings};
};

function mapDispatchToProps(dispatch) {
  return {
    initConfig: () => dispatch(initConfig())
  };
}

如果我添加userSettings: state.userSettings，则该应用程序会进行无限循环，就像设置会不断变化并且组件需要重新加载一样，但是事实并非如此，组件仍然保持不变，怎么可能？为什么要重新渲染？

这是我的减速器：


const initialState = {
 settings : {
    tags: false,
    userSettings: {
      active_socialization         : 0,
      active_socialization_radius  : 0,
      active_socialization_age_min : 0,
      active_socialization_age_max : 0,
      active_socialization_gender  : '',
      position_visibility          : 0,
      position_label               : '',
      notify_mention_post          : 0,
      notify_mention_photo         : 0,
      notify_new_post_follow       : 0,
      notify_new_post_hot          : 0,
      notify_new_post_moderate     : 0,
      notify_new_post_private      : 0,
      notify_new_post_group        : 0,
      visibility_username          : 0,
      visibility_contact           : 0,
      ui_bkg_type                  : false,
      ui_bkg_image                 : false,
      ui_color_photo               : false,
      ui_color_video               : false,
      ui_color_audio               : false,
      ui_color_minimes             : false,
      ui_color_news                : false,
      ui_color_mix                 : false
    }
};

function rootReducer(state = initialState, action) {

  // LOADING
  if (action.type === "UTILITY_LOADING") {
    console.log('reducer UTILIY_LOADING');
    return { ...state,   utility : { loading : true } }
  }

  // LANGUAGE
  if (action.type === "UTILITY_LANGUAGE") {
    console.log('reducer UTILITY_LANGUAGE');
    console.log(action);
    return { ...state, language : action.payload }
  } 

    // INIT CONFIG
  if (action.type === "INIT_CONFIG_LOADED") {
    return { ...state,  settings : { ...state.settings, tags : action.payload.tags, userSettings : action.payload.userSettings, appSettings : action.payload.appSettings, userRow : action.payload.userRow, avatar : action.payload.avatar } , utility : { loading : false, } }
  } 

  if (action.type === "INIT_CONFIG_NOT_LOADED") {
    return { ...state,   utility : { loading : false } }
  } 

...

Redux无限循环

0 个答案: