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

Question

[JeanPaulBelmondo]

Используются микрофронты, 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% не запускает никаких редюсеров.

В чём может быть проблема?
Битый час уже сижу с проблемой

Answer 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 не будет сбрасываться, потому что вы сохраняете его в контексте.

Comments

[JeanPaulBelmondo]

спасибо, попробую