Проблемы с получением последних данных из моего магазина редуксов в приложении «Реакция»

Question

  const { categoryId } = useParams();
  const { clinicsById, clinicsList, loading } = useSelector(
    (state) => state.clinics
  );
  const clinics = clinicsList.map((clinicId) => clinicsById[clinicId]);

  useEffect(() => {
    dispatch(fetchClinicsForCategory({ categoryId }));
  }, [categoryId, dispatch]);

  return <div>{clinics}</div>;

В основном этот компонент отображает разные данные в зависимости от categoryId. Но после первого рендеринга последующие рендеры в другой categoryId показывают предыдущее состояние. В этом сценарии я считаю, что состояние из предыдущего рендера отображается без ожидания прибытия нового состояния. FetchClinicsForCategory () выполняет вызов API для получения новых данных. Как я могу всегда показывать последние данные? Когда я печатаю клиники на консоли, я вижу, что поступают новые данные.

https://streamable.com/5m5o6u

Это код редуктора. Мое действие - вызвать API, получить данные и передать их этому редуктору.

getClinicsSuccess(state, action) {
      const clinics = action.payload;
      state.loading = false;
      state.clinicsList = clinics.map((clinic) => clinic.clinicId);

      clinics.forEach((clinic) => {
        state.clinicsById[clinic.clinicId] = clinic;
      });
    }

Редактировать: Добавлена ​​запись проблемы. Вы можете видеть, что, даже если я нажимаю на категорию с 1 услугой, она показывает несколько служб, с которых я работал на предыдущей странице.

Редактировать: Добавлен код редуктора.

Answer 1

Так что это не было проблемой с Redux ... У меня было отдельное состояние, в котором содержался список отфильтрованных клиник, и это был список, отображаемый вместо моих новых фактических данных. Мне нужно переделать логи c. Спасибо за предложения!