Реагирующий на состояние функциональный компонент с сохранением состояния не перерисовывается при изменении состояния соединения

Question

Я недавно начал использовать ловушки с response-native, поэтому у меня есть этот подключенный компонент с кнопкой, которая меняется в зависимости от состояния избыточности. Кнопка изменяется при обновлении состояния избыточности внутри компонента, но не при его извлечении.

вот моя кнопка:

<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

Проблема заключается в логике c внутри вашего редуктора.

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

Похоже, что вы действительно хотите вернуть возвращаемое вами значение nextState, но логика c читает по-другому.

В настоящее время логика c гласит: Если nextState верно, используйте его, иначе верните предыдущее состояние.

В случае NOT_LOADING вы намереваетесь вернуть значение false, но логика c гласит: Если false истинно, вернуть false, иначе вернуть true. Таким образом, вы можете понять, почему это никогда не сработает.

Вместо этого, упростите случаи и просто верните то, что вы хотите, чтобы состояние было. Условия || не кажутся необходимыми.

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