Изменение темы (светлой/темной) react

Рейтинг: 0Ответов: 1Опубликовано: 09.01.2023

Подскажите, пожалуйста, я новичок в react, я сделал кнопку изменения темы, которая при клике должна диспатчить action и менять тему на противоположную, но state не меняется.

const ThemeToggler = ({ theme, toggleTheme }) => {
    const onToggleTheme = (theme) => {
        if (theme === 'light') {
            toggleTheme('dark');
        } else {
            toggleTheme('light');
        }
    }
    return (
        <div className={cn(s.themeToggler, { [s.lightTheme]: theme === 'light' },
            { [s.darkTheme]: theme === 'dark' })}>
            <button onClick={onToggleTheme}></button>
        </div>
    )
}

const mapStateToProps = (state) => ({})

export default connect(mapStateToProps, { toggleTheme })(ThemeToggler);

const TOGGLE_THEME = 'social-network/app/TOGGLE_THEME';

let initialState = {
    theme: 'light'
};

const appReducer = (state = initialState, action) => {
    switch (action.type) {
        case TOGGLE_THEME:
            return {
                ...state,
                theme: action.theme
            }
        default:
            return state;
    }
}

export const toggleTheme = (theme) => ({ type: TOGGLE_THEME, theme })
export default appReducer;
reactjs redux
Источник: Stack Overflow на русском

Ответы

▲ 0

Actions в Redux нужно диспатчить. Простая опечатка, скорее всего:

import { useDispatch } from "react-redux" // NEW

const ThemeToggler = ({ theme, toggleTheme }) => {
    const dispatch = useDispatch() // NEW

    const onToggleTheme = (theme) => {
        if (theme === 'light') {
            dispatch(toggleTheme('dark')); // NEW
        } else {
            dispatch(toggleTheme('light')); // NEW
        }
    }
}