时间戳

首页 > 解决方案 > 当 redux 连接状态发生变化时，有状态的 react-native 功能组件不会重新渲染

javascript - 当 redux 连接状态发生变化时，有状态的 react-native 功能组件不会重新渲染

问题描述

我最近开始使用带有 react-native 的钩子，所以我有这个连接的组件和一个按钮，该按钮会根据 redux 状态而变化。当组件内部更新 redux 状态时，按钮会更改，但如果来自外部则不会。

这是我的按钮：

<TouchableOpacity
   style={styles.goPremiumContainer}
   onPress={() => pay()}>
   {props.premiumLoading ? (
     <ActivityIndicator size="small" color="#fff" />) 
     : 
    (<Text style={styles.goPremium}>
        {i18n.t('premium:go_premium')}
     </Text>)}
 </TouchableOpacity>

//
//
//

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

export default withNamespaces([], {wait: true})(
  connect(mapStateToProps)(Premium),
);

还有减速机：

const initialState = false;

function updateButtonLoading(state = initialState, action) {
  let nextState;
  switch (action.type) {
    case 'LOADING':
      nextState = true;
      return nextState || state;
    case 'NOT_LOADING':
      nextState = false;
      return nextState || state;

    default:
      return state;
  }
}

export default updateButtonLoading;

要更新按钮，我调用此操作函数：

async updatePremiumButton(actionType) {
  console.log('actionType',actionType)
  const action = {type: actionType};
  const unsubscribe = store.subscribe(() => true);
  await store.dispatch(action);
  await unsubscribe();
      },

谢谢！

标签： javascriptreact-nativereduxreact-redux

解决方案

问题是减速器内部的逻辑。

switch (action.type) {
  case 'LOADING':
    nextState = true;
    return nextState || state;
  case 'NOT_LOADING':
    nextState = false;
    return nextState || state;
  default:
    return state;
}

看来您真正想要做的是返回您分配的值nextState，但逻辑读取不同。

目前的逻辑是：如果nextState是真的使用它，否则返回以前的状态。

在这种NOT_LOADING情况下，您打算返回 value false，但逻辑显示：如果false为真，则返回false，否则返回true。所以你可以明白为什么这永远行不通。

相反，简化案例并返回您想要的状态。||条件似乎没有必要。

function updateButtonLoading(state = initialState, action) {
  switch (action.type) {
    case 'LOADING':
      return true;
    case 'NOT_LOADING':
      return false;
    default:
      return state;
  }
}

推荐阅读