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