Реагировать на родную карту DisPatchToProps не работает

Question

Я не могу заставить мои mapDispatchToProps работать должным образом.

Экспортирую комбайн Редукторы:

export default combineReducers({
  auth: AuthReducer,
  tenants: TenantsReducer
});

Арендаторы редуктора:

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;
  }
};

Тогда в моем действии есть метод getTenantByID

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
    });
  };
};

Наконец, я попытался использовать его в своем компоненте.

import { connect } from 'react-redux';
import { getTenantByID } from '../actions';
...

componentDidMount() {
    const { navigation } = this.props;
    const tenantID = navigation.getParam('tenantID', '0');
    this.props.getTenantByID(tenantID);
      console.log(this.props); 
    this.state = {
      tenantData: this.props.tenantData
    };
  }

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

const mapDispatchToProps = () => {
     return {
          getTenantByID
     };
};

export default connect(mapStateToProps, mapDispatchToProps)(TenantDetails);

В моем componentDidMount console.log (this.props) возвращает пустой объект для tenantData. Что я делаю не так?

Answer 1

Начальное состояние отображается как уже смонтированный компонент, который является пустым объектом {}

this.props.getTenantByID(tenantId);

это действие фактически срабатывает, но данные недоступны в жизненном цикле componentDidMount.

попробуйте добавить рендер, как это

  componentDidMount(){
    this.props.getTenantByID(2);
  }
  render() {
    console.log(this.props.tenantData); // 1st render => {}, 2nd render=> desired data
    return (
      <div/>
    );
  }

Answer 2

не забудьте получить параметр отправки в вашем методе mapDispatchToProps

const mapDispatchToProps = (dispatch) => {
 return {
      getTenantByID: (tenantID ) => {
          dispatch(getTenantByID({tenantID }));
      };
 };
};

вызов для

this.props.getTenantByID({ tenantID: 10 })

Answer 3

используйте componentDidUpdate, чтобы проверить, изменилось ли значение,

componentDidUpdate(prevProps){
     if(prevProps.tenantData !== this.props.tenantData){ console.log(prevProps.tenantData, this.props.tenantData) }
  }