Как повторно выполнить рендеринг компонента, который уже был визуализирован после активации реквизита в другом компоненте

Question

Я настраиваю приложение в React-native, где у меня есть:

Компонент A: компонент поиска с 2 полями

Компонент B: кнопка на этой странице, где ящелкните по нему, появится 3-е поле

Эти компоненты связаны только с реагировать-навигации

В моем случае, компонент B является компонентом, где я могу купить премиум, и я хочу обновитькомпонент А при покупке премиум-класса.

Проблема: когда я уже отрендерил Компонент А, и я перехожу к Компоненту B, нажмите кнопку, Компонент А не перерисовывает, как я могу это сделать?

Я ищу что-то вроде этого:

class ComponentA extends PureComponent {

render() {
    if (userHasNotClickedOnComponentB) {
      return (
        <SearchForm/>
      )
    } else {
        return (
          <SearchFormPremium/>
        )
      }
  }
}

SearchForm и SearchFormPremium - это два отдельных компонента: один с функциями Premium, другой только для обычных пользователей

Я уже рендерил ComponentA, а затем я захожу в ComponentB и нажимаю кнопку

class ComponentB extends PureComponent {

render() {
    return (
       <Button onClick={() => setPremium()}/>
      )
  }
}

Как можно выполнить повторную визуализацию ComponentA, чтобы я мог внести изменения в ComponentB?

Спасибо

Answer 1

Хорошо, с Redux это сработало!

Просто подключите оба компонента. В ComponentA (компонент, который должен автоматически обновляться) используйте функцию componentWillReceiveProps () и обновите его внутри него.

В редукторе:

const initialState = {premium: false};

const tooglePremiumReducer = (state = initialState, action) => {
  switch (action.type) {
    case "TOOGLE_PREMIUM":
      return {
        ...state,
        premium: action.payload.premium,
      };
    default:
      return state;
  }
};

export default tooglePremiumReducer;

В действии:

export const tooglePremiumAction = (premium) => {
    return dispatch => {
      dispatch({
        type: "TOOGLE_PREMIUM",
        payload: {
          premium: premium
        }
      });
    };
  };

В компоненте B:

// Import tooglePremiumAction
class ComponentB extends PureComponent {

render() {
    return (
       <Button onClick={() => this.props.tooglePremiumAction(true)}/>
      )
  }
}

const actions = {
  tooglePremiumAction
};

export default connect(
  actions
)(ComponentB);

В компоненте A:

class ComponentA extends PureComponent {

componentWillReceiveProps(nextProps) {
    if(this.props.premium !== nextProps.premium) {
      //here refresh your component
    }
  }

render() {
    if (!this.props.premium) {
      return (
        <SearchForm/>
      )
    } else {
        return (
          <SearchFormPremium/>
        )
      }
  }
}

const mapStateToProps = state => {
  const premium = state.premium.premium
  return { premium };
};

export default connect(mapStateToProps)(ComponentA);

Answer 2

Возможно, вы захотите использовать Redux или что-то подобное, чтобы сохранить централизованное хранилище, на которое могут смотреть все ваши компоненты.Существует множество руководств по Redux, поэтому я не буду вдаваться в подробности, но по сути это позволит вам:

1) Создать хранилище данных, доступное из любого «подключенного» компонента

2)Отправка действий из любого компонента для обновления хранилища

При подключении компонента подключенные данные становятся реквизитом.Так, например, если вы подключили компоненты A и B к одному и тому же срезу вашего магазина, когда компонент A обновит его, компонент B автоматически выполнит повторную визуализацию, поскольку его реквизиты изменились.

Redux githubстраница