@JeanPaulBelmondo

Почему в webpack module federation, при добавлении get параметра в url состояние redux сбрасывается?

Используются микрофронты, react + redux.

главное приложение:
<Routes>
    <Route path='items' element={<Items />} />
</Routes>


микрофронт
<Routes>
    <Route path="/" element={<Dashboard />} />
</Routes>


в Dashboard я получаю некоторые данные через апи и храню их в redux этого микрофронта, но как только я добавлю любой get параметр через useSearchParams из react-router-dom, то вместо данных из redux store, рендерится пустой массив.
хотя добавление get параметра 100% не запускает никаких редюсеров.

В чём может быть проблема?
Битый час уже сижу с проблемой
  • Вопрос задан
  • 59 просмотров
Пригласить эксперта
Ответы на вопрос 1
@5465
Проблема может быть связана с тем, что при добавлении get параметра в URL компонент Dashboard перерендеривается и создается новый экземпляр Redux store для этого компонента, который не содержит сохраненных данных.

Для решения этой проблемы необходимо сохранять состояние Redux store вне компонента и передавать его внутрь компонента при каждом рендере. Для этого можно использовать React Context API.

В главном приложении создайте контекст:

// appContext.js
import React from 'react';

export const AppContext = React.createContext({});


В главном приложении оберните ваш компонент в провайдер контекста и передайте в контекст текущее состояние Redux store:

// App.js
import { AppContext } from './appContext';

function App() {
  const [store, setStore] = useState(initialState); // начальное состояние Redux store

  return (
    <AppContext.Provider value={{ store, setStore }}>
      <Routes>
        <Route path='items' element={<Items />} />
      </Routes>
    </AppContext.Provider>
  );
}


В компоненте Dashboard микрофронта, вы можете получить текущее состояние Redux store через контекст и использовать его для отображения данных:

// Dashboard.js
import React, { useContext } from 'react';
import { useSearchParams } from 'react-router-dom';
import { AppContext } from '../appContext';

function Dashboard() {
  const { store } = useContext(AppContext);
  const [searchParams] = useSearchParams();

  // получаем данные из текущего состояния Redux store
  const items = store.items;

  // обновляем данные в Redux store, если это необходимо
  if (searchParams.get('update')) {
    const newItems = await fetchItems(); // получаем новые данные
    setStore(prevState => ({ ...prevState, items: newItems })); // обновляем состояние Redux store
  }

  return (
    <div>
      {items.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}


Теперь, когда вы добавляете параметр update в URL, компонент Dashboard не будет перерендериваться и состояние Redux store не будет сбрасываться, потому что вы сохраняете его в контексте.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы