Часть 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.
- Мы изменим наш компонент приветствия из части 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 в нашем веб-приложении!