Создайте мультитематическое веб-приложение, используя модули React Redux и CSS.

Структура папок

Следующая структура папок предназначена для этого простого проекта, а для более сложных проектов она будет другой.

|- App.js/ # основной компонент

|- App.module.css/ # стилей

|- store/ # хранилище избыточности

| — — действия/ # избыточные действия

| — — — index.js

| — — редукторы/ # редукционный редуктор

| — — — index.js

Стили

у нас есть только два класса Light и Dark в нашем файле App.module.css :

.Light {
    background-color: white;
}
.Dark {
    background-color: black;
}

Магазин

Мы должны инициировать и изменить тему в редьюсерах. вот внутри reducers/index.js:

const initialState = { theme: 'light' };
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case "CHANGE_THEME":
            return {
                ...state,
                theme: action.newTheme
            };
        default:
            return state;
    }
};
export default reducer;

Мы должны вызвать наш редьюсер и отправить ему данные с помощью действий. вот внутри actions/index.js:

export const changeTheme = (theme) => {
    return {
        type: "CHANGE_THEME",
        newTheme: theme
    };
};

Основной

Теперь мы должны создать нашу кнопку выбора и подключить ее к хранилищу избыточности, используя реквизиты:

import React from 'react';
import { createStore, combineReducers } from 'redux';
import { Provider, connect } from 'react-redux';
import { changeTheme } from './store/actions';
import themeChangerReducer from './store/reducers';
import classes from './Auth.module.css';
const rootReducer = combineReducers({ appTheme: themeChangerReducer, });
const store = createStore(rootReducer);

const App = props => {
  const { currentTheme, onChangeAction } = props;
  return (
    <Provider store={store}>
      <div className={currentTheme === "dark" ? classes.Dark : classes.Light}>
        <label>Choose Theme:</label>
        <select onChange={onChangeAction(value)}>
          <option value="light">Light Theme</option>
          <option value="dark">Dark Theme</option>
        </select>
     </div>
  </Provider>
  );
}

const mapStateToProps = state => {
    return {
        // getting current theme that is set in redux reducer state
        currentTheme: state.appTheme.theme,
    };
};
const mapDispatchToProps = dispatch => {
     return {
// function that is implemented when we change select button value
         onChangeAction: (theme) => dispatch(changeTheme(theme)), 
     };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

При такой настройке, когда вы изменяете значение тега select, встроенное событие onChange будет запускать onChangeAction действия redux с его значением в качестве входных данных. после вызова onChangeAction состояние редуктора изменится на входное значение функции (светлое или темное).

Тег Main Div внутри компонента приложения будет проверять, является ли текущее состояние хранилища избыточности темным, он будет использовать класс таблицы стилей Dark, в противном случае он использует Light. один.