Redux выборка, возвращающая пустой массив полезных данных

Question

Я пытаюсь получить данные из API (теперь у меня есть массив для тестирования) и показать его на моем экране.

Я создаю файл действия:

import {
  GET_TENANT_DATA
} from './Types';

export const getTenants = ({ userID }) => {
  return (dispatch) => {
    const test = ['Saab', 'Volvo', 'BMW']; // Later it will be changed for axios fetch
    dispatch({
      type: GET_TENANT_DATA,
      payload: test
    });
  };
};

Мой редуктор:

import {
  GET_TENANT_DATA
} from '../actions/Types';

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

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

Затем на своем экране я тестирую его по console.log:

...
componentDidMount() {
    AsyncStorage.getItem('userID')
      .then((value) => {
        const userId = JSON.parse(value);
        this.props.getTenants(userId);
      });
  }

  render() {
    console.log(this.props.data);
...

Однако в журнале отображается пустой массив вместо ['Saab', 'Volvo', 'BMW']. Кто-нибудь знает, почему это происходит?

Спасибо

Answer 1

Вместо установки свойства data в вашем редукторе вы устанавливаете свойство tenants, а data остается, как было установлено изначально - пусто.

Измените свой редуктор следующим образом:

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