Первое знакомство с реакцией (5) Окончательное решение потока данных dva (нулевая конфигурация)

JavaScript Express React.js Redux

chaiguanpeng.github.io/

рассмотрение

Исправлено, нулевая конфигурацияumiЭто не то, что dva сделал для нас, но dva-cli имеет встроенный umi в следующей версии (например, dva-cli 1.0), что является благом для разработчиков Заинтересованные друзья могут испытать последнюю версию.

npm i dva-cli@next -g  //安装下一代dva-cli，内置umi
dva new dvaTest
cd dvaTest
npm start

Давайте начнем с самого простого два и разберемся в процессе.Важно: dva не изобретает новые концепции, все из которых уже упоминались ранее. Просто слой упаковки, если вы очень четко разбираетесь в понятиях в редуксе и саге, два для вас бесплатны, сложности нет, и ко мне вы не придете.

Введение

  • Легкий интерфейсный фреймворк, основанный на redux, redux-saga и react-router.
  • dva — решение для инкапсуляции, основанное на лучших практиках react+redux, которое упрощает многие утомительные операции по использованию redux и redux-saga

поток данных

  • Изменения данных обычно происходят через:
    • Поведение пользователя при взаимодействии (пользователь нажимает кнопку и т. д.)
    • Запускается действиями браузера (такими как переходы маршрутизации и т. д.)
  • Когда этот тип поведения изменяет данные, вы можете инициировать действие через диспетчеризацию. Если это синхронное поведение, оно напрямую изменит состояние через редукторы. Если это асинхронное поведение (побочный эффект), оно сначала вызовет эффекты и затем перетекайте к редьюсерам, чтобы окончательно изменить состояние.

Достигнут демонстрационный эффект

Поскольку два относительно проста, ни одна новая концепция не объясняется более ясно с примерами. Наконец, нам нужно реализовать асинхронное получение данных num, а затем нажать эффект counter+num

  • Структура каталогов

1. Основной входной файл

import React from 'react';
import dva from 'dva';
import Counter from './Counter';
//dva是一个函数，通过执行它可以拿到一个app对象
let app = dva();
//一个模板就是一个状态，然后把reducer和状态 写在一起了，
//添加一个模块
app.model({
   xxxx
});
//参数是一个函数，此应用本身就是要渲染函数的返回值
app.router(() => <Counter />);

//本质是启动应用，就是通过app.router获取组件，并且通过ReactDOM渲染到容器内容
app.start('#root');

Выше приведен самый простой файл основной записи dva.Три простых API, app.model, app.router и app.start, уже интегрированы с react, redux-router, redux и redux-saga, что просто благословение для разработчиков. Объясним, как использовать

  • dva — это функция, вы можете получить объект приложения, выполнив его
  • app.model() добавляет модуль, описание которого приведено ниже.
  • APP.ROUTER () принимает функцию, затем отображает значение возврата функции
  • App.Start («# root»), получите компонент через app.wouter, а затем сделайте его в контейнер через Reactry
1.1, использование app.model()
  • Примите объект и запишите все состояния, редукторы и эффекты здесь для простоты обслуживания.
app.model({
    //命名空间。因为一个应用会有很多个模型,每个模型要有一个名字
    namespace: 'counter',
    //此命名空间的默认状态
    state: { current: 0, highest: 0 },
    //它是用来接收action,修改仓库状态的
    reducers: {
        save(state, action) {
            return { current:state.current+action.payload  };
        }
    }
});

Вы должны быть знакомы с этими существительными.

  • namespace namespace, нам нужно дать модели имя
  • состояние => состояние, которое является состоянием в редуксе
  • редукторы => процессор, который является процессором в редуксе

Чтобы еще раз подчеркнуть, dva не изобретал новые концепции, а просто слой инкапсуляции. Сделать состояние более удобным для обслуживания

2. Напишите компонент Counter.js

import React from 'react';
import { connect } from 'dva';
class Counter extends React.Component {
    render() {
        return (
            <div className="container">
                <div className="current">
                    当前记录:{this.props.current}
                </div>
                <div className="addButton">
                    <button onClick={() => this.props.dispatch({ type: 'counter/save'，payload:2 })}>+</button>
                </div>
            </div>
        )
    }
}
export default connect(
    state => {
        return state.counter;
    }
)(Counter);

Но чтобы объяснить больше, есть 2 места, на которые следует обратить внимание:

  • Когда действие отправляется внутри компонента, введите: 'counter/add', перед ним есть счетчик (пространство имен)
  • Состояние соединения является общим состоянием, и необходимо сформулировать состояние, требующее счетчика.

Пока что прошел процесс dva, это очень просто, давайте проверим, можем ли мы нажать и добавить 2

Идеальная реализация, как насчет асинхронности, тогда мы используем экспресс для написания простого интерфейса

3. Напишите серверный интерфейс server.js

Мы используем экспресс для написания простых интерфейсов и не объясняем использование экспресса.экспресс через поезд

let express = require('express');
let cors = require('cors'); //解决跨域的包
let app = express();
app.use(cors()); //使用中间件cors
app.get('/amount', function (req, res) {
    res.send({ num: 5 });
});
app.listen(3000);
  • Далее запускаем сервис и видим эффект

4. Клиент отправляет запрос на получение данных

Так как кейс относительно простой, он прописан в src/index.js

function getAmount() {
    return fetch('http://localhost:3000/amount', {
        headers: {
            "Accept": "application/json"
        }
    }).then(res => res.json());
}

5. Добавить эффекты (побочные эффекты) в app.model (то есть эффекты в redux-saga)

  effects: {
        //表示这是一个generator effect=redux-saga/effects
        *add(action, { call, put }) {
            let { num } = yield call(getAmount); 
            yield put({ type: 'save', payload: num });
        }
    },

Сначала получите данные асинхронно, затем отправьте действия для изменения состояния, а затем обновите представление.

6. Добавить кнопку асинхронного подсчета в соответствующий компонент

<button onClick={() => this.props.dispatch({ type: 'counter/save',payload:2 })}>同步加2</button>
<button onClick={() => this.props.dispatch({ type: 'counter/add' })}>异步记数</button>
  • Добавлена ​​кнопка асинхронного подсчета, которая отправляет тип действия добавления.
  • Тип добавления контролируется дополнительными эффектами (побочными эффектами), а getAmount() выполняется для асинхронного получения данных.
  • После получения данных действие сохранения отправляется и обрабатывается редюсерами.
  • обновление страницы

Результаты теста

конец

dva упрощает многие утомительные операции при использовании redux и redux-saga, что удобно нам для разработки и имеет более высокую ремонтопригодность.Он используется с umi и известен как нулевая конфигурация.В следующей статье будет объяснено использование dva+ уми

Категории