реагировать с редуксом с помощью маршрутизатора

Question

У меня есть git репо, которое я создал https://github.com/markortiz905/emp-app

Я практиковал reactjs и хотел узнать об избыточном толчке, поначалу довольно легко, но я терпел неудачу чтобы понять, как это работает и на маршрутах.

Мое расследование привело меня к мысли, что данные, полученные с сервера, не запускают компонент обновления из-за маршрутизации?

Если у кого-то есть время взглянуть на мое репо, его всего несколько файлов и кодов, просто загрузите empmloyee и отобразите на экране

Вот мой редуктор. js фрагмент

const initStates = {
    employees: [],
    loading: true
};

function rootReducer(state = initStates, action) { 
    console.log(state.employees);
    if (action.type == UPDATE_EMPLOYEES) {
        state.employees = action.payload;
    } else if (action.type == LOADING) {
        state.loading = action.payload;
    }
    //means something happen bad
    return state;
}

Answer 1

Я только что выяснил, что не так, кажется, что я делаю это неправильно с самого начала в моем скрипте редуктора. Это неправильно, я обновляю сотрудников из переменной const, но const не может быть обновлена ​​правильно? как только вы присвоите значение переменной с помощью const, вы не сможете переназначить его на новое значение. источник - https://tylermcginnis.com/var-let-const/

const initStates = {
    employees: [],
    loading: true
};

function rootReducer(state = initStates, action) {
    console.log(state.employees);
    if (action.type == UPDATE_EMPLOYEES) {
        state.employees = action.payload;
    } else if (action.type == LOADING) {
        state.loading = action.payload;
    }
    //means something happen bad
    return state;
}

Поэтому я изменил мой редуктор, чтобы вместо него возвращать новый объект, Я полагаю, что вы можете сделать то же самое, используя javascript Объектная утилита , но сейчас я использую эту

function rootReducer(state = initStates, action) {
  switch (action.type) {
    case UPDATE_EMPLOYEES_STARTED:
      return {
        ...state,
        loading: true,
        employees: null,
      };
    case UPDATE_EMPLOYEES:
      return {
        ...state,
        loading: false,
        error: null,
        employees: action.payload,
      };
    case UPDATE_EMPLOYEES_ENDED:
      return {
        ...state,
        loading: false,
        employees: [...state.employees],
      };
    default:
      return state;
  }
}

Пожалуйста, нажмите как и проголосуйте:)