Question

我最近开始将钩子与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();
      },

谢谢！

Answer 1

问题在于减速器内部的逻辑。

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情况下，您打算返回值false，但是逻辑显示为：如果false为true，则返回false，否则返回{{ 1}}。因此，您可以了解为什么这永远无法解决。

相反，简化情况并仅返回您想要的状态即可。 true条件似乎不是必需的。

||

当Redux连接状态更改时，有状态反应本机功能组件不会重新呈现

1 个答案: