Для того, чтобы сохранять состояние в одном "slice" Redux Toolkit и применять его к разным частям страницы, вы можете использовать функцию `createSlice` для создания среза состояния и редюсера, а затем экспортировать этот срез и использовать его в различных компонентах.
Пример создания среза состояния с помощью `createSlice`:
```javascript
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
isOpen: false,
};
const slice = createSlice({
name: 'modal',
initialState,
reducers: {
openModal(state) {
state.isOpen = true;
},
closeModal(state) {
state.isOpen = false;
},
},
});
export const { openModal, closeModal } = slice.actions;
export default slice.reducer;
```
Затем вы можете объединить этот срез состояния с остальными срезами в вашем хранилище Redux и использовать его в различных частях страницы, подключая его к компонентам.
Чтобы исправить проблему, чтобы при нажатии на элемент открывалось только определенное окно, вам необходимо добавить логику, которая будет отслеживать текущее состояние окна и открывать или закрывать только определенное окно по нажатию.
Пример использования созданного среза состояния в React компоненте:
```javascript
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { openModal, closeModal } from './modalSlice';
const ModalComponent = () => {
const isOpen = useSelector(state => state.modal.isOpen);
const dispatch = useDispatch();
const handleClick = () => {
if (isOpen) {
dispatch(closeModal());
} else {
dispatch(openModal());
}
};
return (
<div>
<button onClick={handleClick}>Toggle Modal</button>
{isOpen && <div>Modal content</div>}
</div>
);
};
export default ModalComponent;
```
Таким образом, вы можете использовать Redux Toolkit для управления состоянием в разных частях страницы и добавить логику открытия и закрытия определенного окна по нажатию на элемент.