Отправка определенных значений в редуктор из массива при нажатии кнопки

#reactjs #redux

#reactjs #redux

Вопрос:

Я пытаюсь отправить тему в свой редуктор с помощью события onClick. Однако я не уверен, как передать данные с моей кнопки в мою handleTheme функцию, чтобы отправить значения выбранного массива в мой редуктор.

Вот мои две темы:

  const themes = [
    {
      themeTitle: "Theme 1",
      backgroundColor: "white",
      border: "none",
      buttonBackgroundColor: "black",
      color: "white",
      searchBackgroundColor: "black",
      fontFamily: selectedFont,
    },
    {
      themeTitle: "Theme 2",
      backgroundColor: "white",
      border: "none",
      buttonBackgroundColor: "#1A77F2",
      searchBackgroundColor: "#1A77F2",
      color: "white",
      fontFamily: selectedFont,
    },
  ];
 

Вот моя функция onClick:

  // dispatch theme to reducer
  const handleTheme = () => {
    if()
    dispatch({
      type: "SET_THEME",
      item: themes[0]
      },
    });
  };
 

И вот как я визуализирую кнопки на веб-странице:

 {themes.map((t) => (
          <button onClick={handleTheme} id={t.themeTitle}>
            {t.themeTitle}
          </button>
        ))}
 

Комментарии:

1. С какой проблемой вы столкнулись ? Вы можете передать значение следующим образом -> onClick={()=> handleTheme(t)}

Ответ №1:

Человек, если вы используете хуки, вы должны прочитать этот раздел https://react-redux.js.org/api/hooks .

Но чтобы сэкономить ваше время, мы начинаем.

 
import { useSelector, useDispatch } from 'react-redux'
...

//inside your hook

const dispatch = useDispatch();

dispatch({
      type: "SET_THEME",
      item: themes[0]
      },
    })