Данные React Native Reducer не отправляются на мою страницу - PullRequest
Новая
       19

Данные React Native Reducer не отправляются на мою страницу

0 голосов
/ 02 июля 2019

У меня есть данные действия, которые отправляются в редуктор, но не в конструктор моей страницы.

Метод действия: 

export const getTenantByID = ({ tenantID }) => {
  return (dispatch) => {
    const getTenant = {
      FirstName: 'Jonh', LastName: 'Doe', Email: 'jonh@test.com', Phone: 'xxx-xxx-xxxx',
      Unit: '101', MiddleName: '',
    };
    dispatch({
      type: GET_TENANT_DATA,
      payload: getTenant
    });
  };
};

Тогда в моем редукторе 

const INITIAL_STATE = {
  error: false,
  data: [],
  tenantData: {},
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case GET_TENANTS_DATA:
      return { ...state, error: false, data: action.payload };
    case GET_TENANT_DATA:
        return { ...state, error: false, tenantData: action.payload };
    default:
      return state;
  }
};

Если я выполняю console.log (действие) после случая GET_TENANT_DATA, я вижу эти данные для полезной нагрузки, поэтому она работает в редукторе.

Моя страница: 

constructor(props) {
    super(props);
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
    this.props.getTenantByID(tenantID);
      console.log(this.props); // this show tenantData as a empty object
    this.state = {
      tenantData: this.props.tenantData
    };
  } 
  ...

const mapStateToProps = ({ tenants }) => {
  const { error, tenantData } = tenants;

  return { error, tenantData };
};

export default connect(mapStateToProps, {
  getTenantByID
})(TenantDetails);

1 Ответ

1 голос
/ 04 июля 2019

Похоже, что вы используете thunk, и оно асинхронно, поэтому вам нужно await ваше действие, чтобы вы могли получить обновленное состояние после запуска действия. В противном случае, вы можете удалить Thunk, если это не нужно. Вы можете захотеть запустить действие в componentDidMount вместо конструктора тоже 

componentDidMount() {
   this.getTenant();
}

getTenant = async () => {
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
    await this.props.getTenantByID(tenantID); // Wait for action to complete
    console.log(this.props); // Get updated props here
    this.state = {
      tenantData: this.props.tenantData
    };
}

const mapStateToProps = ({ tenants }) => {
  const { error, tenantData } = tenants;

  return { error, tenantData };
};

export default connect(mapStateToProps, {
  getTenantByID
})(TenantDetails);

Или вы можете получить обновление через componentDidUpdate

componentDidMount() {
   this.getTenant();
}

componentDidUpdate(previousProps) {
    if (this.props.tenantData !== previousProps.tenantData) {
       console.log(this.props); // Get updated props here
       this.state = {
          tenantData: this.props.tenantData
       };
    }
}

getTenant = async () => {
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
    this.props.getTenantByID(tenantID);
}

const mapStateToProps = ({ tenants }) => {
  const { error, tenantData } = tenants;

  return { error, tenantData };
};

export default connect(mapStateToProps, {
  getTenantByID
})(TenantDetails);
...