Как я могу настроить Redux Toolkit так, чтобы сохранять состояние в одном "slice", но применять его к разным частям страницы?

Как исправить проблему, чтобы при нажатии на элемент открывалось только определенное окно, а не все? Я использую React и пишу сегмент для компонента.
  • 7 марта 2024 г. 18:49
Ответы на вопрос 1
Для того, чтобы сохранять состояние в одном "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 для управления состоянием в разных частях страницы и добавить логику открытия и закрытия определенного окна по нажатию на элемент.
Похожие вопросы