Часть 3: Установка Redux для вашего приложения Django

Это третья часть серии руководств, которые проведут вас через процесс интеграции React / Redux в существующее унаследованное веб-приложение Django от ES5. В этой части серии рассказывается об интеграции Redux в наше веб-приложение. Вы можете обратиться к частям 1 и 2, где мы настраиваем компилятор ES6 и React соответственно.

React стал еще более эффективным, кратким и удивительным с добавлением Redux, давайте начнем с его установки!

Установка

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

Нам нужно установить четыре библиотеки: redux, react-redux, redux-thunk иredux-logger

Давайте используем --save-dev, чтобы добавить библиотеки в качестве зависимостей в наш файл package.json, что является хорошей привычкой для разработки

npm install redux --save-dev
npm install react-redux --save-dev
npm install redux-thunk --save-dev
npm install redux-logger --save-dev

redux-thunk и redux-logger являются промежуточными программами для Redux и не обязательны для запуска с Redux. Однако оба являются очень полезными дополнениями к redux.

redux-thunk позволяет писать создателей действий, которые возвращают функцию вместо действия. Затем преобразователь может использоваться для отсрочки отправки действия или для отправки только при соблюдении определенного условия.

redux-logger невероятно полезен, потому что он автоматически регистрирует дерево состояний в консоли Chrome DevTools при каждом изменении состояния.

Пример использования

Давайте проверим, правильно ли установлен и работает ли Redux.

  1. Мы изменим наш компонент приветствия из части 2, чтобы подключиться к хранилищу Redux. Обратите внимание: поскольку библиотека react-redux имеет несколько экспортов, нам нужно использовать синтаксис фигурных скобок, чтобы импортировать только то, что мы хотим.

Ниже мы добавили mapStateToProps функцию, распространенную в React-Redux, которая позволяет нам добавлять данные в props на основе состояния. В этом случае мы добавляем ключ defaultMessage, значение которого берется из message в дереве состояний.

… / webface / static / webface / js / components / greeter.jsx

import React from 'react';
import { connect } from "react-redux"; 

class Greeter extends React.Component {
render() {
    return <h1>{this.props.defaultMessage}</h1>;
  }
}
 
const mapStateToProps = state => {
 return {
  defaultMessage: state.message
 };
}
export default connect(mapStateToProps)(Greeter);

2. Теперь мы изменим сценарий hello.js для использования Redux (редуктор, поставщик, хранилище и т. Д.):

… / webface / static / webface / js / scripts / hello.js

import Greeter from '../components/greeter.jsx';
import { createStore, applyMiddleware } from 'redux';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import loggerMiddleware from 'redux-logger';
// ==== reducer ====
const initialState = {
 message: "Hello there Ann"
};
const rootReducer = function(state = initialState, action) {
 switch (action.type) {
  default:
   return state;
 }
};
// ==== main script ====
  
const store = createStore(rootReducer, applyMiddleware(thunkMiddleware, loggerMiddleware));
ReactDOM.render(
  <Provider store={store}>
    <Greeter />,
  </Provider>,
  document.getElementById('root')
);

Обратите внимание, когда мы создаем хранилище Redux, которое мы должны вызвать:

applyMiddleware(thunkMiddleware, loggerMiddleware)

Обратите внимание, что loggerMiddleware должен быть последним промежуточным ПО в цепочке.

Не стесняйтесь читать больше о redux-logger, если желаете здесь.

Теперь, когда мы переходим на localhost: 8000 / es6 /, видимое приветствие ‹h1› должно читать «Привет, Энн».

Мы можем успешно начать использовать Redux в нашем веб-приложении!