React Redux Boiler Plate

Первый вопрос: нужен ли вам Redux с вашим приложением? Redux - это уровень управления состоянием, который помогает вам управлять состоянием и дает вам возможность передавать реквизиты вашим компонентам с помощью хранилища. Я бы сказал, что все сводится к потребностям вашего приложения, одна из них - масштабируемость. Я говорю о масштабируемости, потому что Redux использует действия и редукторы. Важную роль играет использование чистых функций в редукторе.

Redux разделяет проблемы, что упрощает отладку и экономит много времени в долгосрочной перспективе, поскольку вам не нужно просматривать один файл с огромным количеством кода, чтобы найти надоедливую ошибку. При всем вышесказанном я чаще, чем часто слышу, шаблонный код, который идет с настройкой Redux в вашем приложении, что может быть очень… из-за отсутствия лучшего слова… раздражающим. Что ж, Эй Джей, о чем ты говоришь?

Что ж, мои друзья не боятся, потому что следующие шесть шагов, если вы продолжите читать дальше, будут касаться того, что я использую при настройке Redux в своих приложениях.

Прежде чем вы начнете. Я предполагаю, что вы знакомы с компонентами React, без отслеживания состояния, с отслеживанием состояния и всеми другими полезными вещами. Если нет, id рекомендую вам сначала хорошо это понять. Хорошо, давайте приступим к делу.

Мы будем создавать простое приложение React с кнопкой, которая будет переключать тег h1 при нажатии кнопки. Мы будем внедрять Redux для обработки действий при нажатии кнопки, которые обновят магазин и отобразят другой тег h1.

Шаг первый. В терминале перейдите в корень каталога приложения и запустите create-react-app <insert application name here />

Шаг второй: когда вы создаете приложение для реагирования, оно также имеет некоторый шаблон, поэтому давайте очистим его и начнем с пустого холста.

  • Очистить файл app.css
  • Внутри файла App.js очистите все внутри <div>container с помощью класса «App».
  • Давайте поместим тег <h1> со строкой Hello World
  • Удалите строку 2, в которой импортируется логотип.
  • Удалите файл index.css внутри папки src.
  • Внутри файла index.js удалите строку 3, в которую он импортирует index.css.
  • Удалить файл logo.svg

Если все пойдет хорошо, запустите свой терминал npm start. Убедитесь, что вы находитесь в корневом каталоге вашего приложения. У нас должна остаться пустая html-страница с надписью «Hello World».

Шаг 3. Установите и импортируйте пакеты redux и react-redux.

  • Внутри вашего терминала runnpm i redux react-redux
  • Внутри вашего каталога src создайте файл store.js
  • Внутри файла store.js import { createStore } from 'redux';
  • Внутри файла store.js import rootReducer from './Reducers/rootReducer';
  • Создать aconst initialState = {};
  • Создать aconst store = createStore(rootReducer, initialState);
  • В конце файла store.js export default store;

Затем давайте импортируем Provider из response-redux в наш файл index.js.

  • Внутри вашего файла App.js import { Provider } from 'react-redux';
  • Теперь давайте импортируем магазин с помощью import store from './store';
  • Оберните контейнер <App /> в <Provider>component и передайте свойство store, которое равно store
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider } from 'react-redux';
import store from './store';
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById('root'));
serviceWorker.unregister();

Шаг четвертый. Настройка редукторов

  • Внутри вашей папки src создайте папку под названием Reducers
  • Внутри папки Reducers создайте файл rootReducer.js
  • Внутри вашего файла rootReducer.js import { combineReducer } from 'redux';
  • В следующей строке import AppReducer from ‘./appReducer’;
  • Внизу файла rootReducer.js экспортируем наш combReducer.
export default combineReducers({
  app: AppReducer
});
  • Внутри папки Reducer создайте файл appReducer.js
  • Внутри файла appReducer.js import TOGGLE_BUTTON from ‘../Actions/types';
  • Установить const initialState = { toggleButton: true };
  • На следующей строке
export default (state = initialState, action) => {
  switch(action.type) {
    case TOGGLE_BUTTON:
      return {
        ...state,
        toggleButton: !state.toggleButton
      }
      default:
        return state
  }
}

Шаг пятый. Давайте создадим нашу папку действий и создадим наше первое действие.

  • Внутри нашей папки src создайте папку Actions
  • Внутри нашей папки Actions создайте файл appActions.js и types.js.
  • Внутри файла ввода appActions.js
import {
  TOGGLE_BUTTON
} from './types';
export const toggleButton = () => {
  return {
    type: TOGGLE_BUTTON
  }
}
  • Внутри ввода файла types.js
export const TOGGLE_BUTTON = 'TOGGLE_BUTTON';

Шаг 6. Теперь давайте объединим все воедино.

  • Внутри вашего файла App.js ‘import { connect } from 'react-redux';
  • ‘import { toggleButtonAction } from './Actions/appActions';
import React, { Component } from 'react';
import './App.css';
import { connect } from 'react-redux';
import { toggleButtonAction } from './Actions/appActions';
class App extends Component {
  render() {
    const { toggleButton, toggleButtonAction } = this.props;
    return (
      <div className="App">
        { toggleButton ? 
          <h1>Hello World</h1> : <h1>Goodbye World</h1> 
        }
        <button onClick={toggleButtonAction}>
          Click Me
        </button>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  ...state.app
});
export default connect(
  mapStateToProps, 
  { toggleButtonAction })(App);

Теперь вернемся к окну и нажмем эту кнопку.

И вуаля! Теперь вы реализовали Redux с приложением React.

Вот ссылка на мой код на Github, если вы хотите его проверить.

Https://github.com/angelo-james/react-redux-boilerplate

Будучи студентом игры, игра - это мир разработки программного обеспечения. Я постоянно учусь и нахожу новые способы улучшить свое ремесло. Основная причина моей статьи заключалась не только в том, чтобы помочь однокурснику в игре, но и для того, чтобы укрепить мои знания материала. При этом мы будем очень благодарны за любую обратную связь. Спасибо. Надеюсь, это помогло.

Кроме того, если вы хотите лучше понять Redux, я хотел бы сказать своему инструктору Мансуру Бахраманду быстрый ответ и предоставить вам очень полезный ресурс. Сразу к делу и хороший код. Посмотрите видео ниже.