Как мне сделать так, чтобы slice был для каждого компонента свой?

Question

[MRcracker]

Я использую redux toolkit.

Задача сделать один slice, но чтобы он был для каждого компонента на странице свой.

// components/Dropdown.js
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import {
  fetchData,
  selectOptions,
  selectSelectedOption,
  setSelectedOption,
  toggleDropdown,
  selectOpenDropdownId,
} from "@/store/drop";

const Dropdown = ({ dropdownId }) => {
  const dispatch = useDispatch();
  const options = useSelector(selectOptions);
  const selectedOption = useSelector(selectSelectedOption);
  const openDropdownId = useSelector(selectOpenDropdownId);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  const handleSelectChange = event => {

    dispatch(setSelectedOption(event.target.value));
  };

  return (
    <div>
      <h3 onClick={() => dispatch(toggleDropdown({ dropdownId }))}>
        {selectedOption
          ? `Выбранная опция: ${selectedOption}`
          : "Выберите опцию"}
      </h3>
      {openDropdownId === dropdownId && (
        <div>
          <label>Выберите опцию:</label>
          <select value={selectedOption} onChange={handleSelectChange}>
            {options.map(option => (
              <option key={option.id} value={option.id}>
                {option.name}
              </option>
            ))}
          </select>
        </div>
      )}
    </div>
  );
};

export default Dropdown;

// redux/dropdownSlice.js
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

export const fetchData = createAsyncThunk("dropdown/fetchData", async () => {
  const response = await fetch("https://example.com/api/options");
  const data = await response.json();
  return data;
});

const dropdownSlice = createSlice({
  name: "dropdown",
  initialState: {
    options: [],
    selectedOption: "",
    openDropdownId: null,
  },
  reducers: {
    setSelectedOption: (state, action) => {
      state.selectedOption = action.payload;
    },
    toggleDropdown: (state, action) => {
      const { dropdownId } = action.payload;
      state.openDropdownId =
        state.openDropdownId === dropdownId ? null : dropdownId;
    },
  },
  extraReducers: builder => {
    builder.addCase(fetchData.fulfilled, (state, action) => {
      state.options = action.payload;
    });
  },
});

export const { setSelectedOption, toggleDropdown } = dropdownSlice.actions;

export const selectOptions = state => state.dropdown.options;
export const selectSelectedOption = state => state.dropdown.selectedOption;
export const selectOpenDropdownId = state => state.dropdown.openDropdownId;

export default dropdownSlice.reducer;

Проблема заключается в том, что кликая на один список открывается и второй. Мне не нужно дублировать их. Мне нужно сделать два списка одинаковых и использовать в разных частях сайта. useState применять не хочу.

Answer 1

[0xD34F]

кликая на один список открывается и второй

Ну ещё бы не открывался. А как конкретно накосячили - забыли передать dropdownId или тупо скопипастили уже существующий?

Если каждому экземпляру Dropdown передавать уникальный dropdownId, то открываться будет один.

Comments

[MRcracker]

а redux только учусь использовать. Знал бы технологию отлично, то не задавал бы вопросы. Может покажите пример как именно нужно было передать dropdownId?

и еще вопрос тогда, если так хорошо знаете. extraReducers помог бы решить данную проблему? Если да, то, что лучше его использовать или id передавать?

[0xD34F]

redux только учусь использовать. Знал бы технологию отлично, то не задавал бы вопросы. Может покажите пример как именно нужно было передать dropdownId?

Чего пример, как prop в экземпляр компонента передать? Совсем охренели, что ли? И при чём тут redux? Если не поняли, о чём речь, то откройте документацию react'а - и с самого начала ничего не пропуская начинайте изучать.

и еще вопрос тогда, если так хорошо знаете

То есть, никакого вопроса. Я же ничего не знаю - в отличие от вас, учиться использовать redux даже не начинал.

UPD. Глянул вашу историю вопросов - оказывается, за четыре с лишним года так и не осилили основы react'а. Не стыдно? Поправил ваш говнокод, добавил в ответ ссылку, дальше сами - смотрите, думайте.