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.
- Внутри вашего терминала run
npm i redux react-redux
- Внутри вашего каталога src создайте файл store.js
- Внутри файла store.js
import { createStore } from 'redux';
- Внутри файла store.js
import rootReducer from './Reducers/rootReducer';
- Создать a
const initialState = {};
- Создать a
const 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, я хотел бы сказать своему инструктору Мансуру Бахраманду быстрый ответ и предоставить вам очень полезный ресурс. Сразу к делу и хороший код. Посмотрите видео ниже.