Первое знакомство с react (4) redux-saga, асинхронное решение в react

внешний интерфейс JavaScript React.js Redux

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

Сегодняшняя демонстрация предназначена для реализации асинхронного калькулятора для изучения рабочего процесса Redux-saga.

Введение

  • redux-saga — это промежуточное программное обеспечение для редукции, и роль промежуточного программного обеспечения заключается в предоставлении дополнительных функций для редукции.
  • Так как все операции в редьюсерах синхронны и чисты, то есть редьюсеры — это чистые функции, чистая функция означает, что возвращаемый результат функции зависит только от ее параметров, и не будет иметь побочных эффектов снаружи во время выполнения, то есть что бы то ни было передается ему, он выплюнет.
  • Однако в реальном разработке приложений мы хотим выполнить некоторые асинхронные (такие как запросы AJAX) и необработанные операции (например, изменение внешнего состояния), которые называются «побочными эффектами» в парадигме функциональной программирования.

redux-saga — это промежуточное ПО, используемое для обработки вышеуказанных побочных эффектов (асинхронных задач). Это диспетчер процессов, который получает события и, возможно, запускает новые события, управляя сложными процессами для вашего приложения.

Как работает редукс-сага

  • Если вы не знаете о генераторах, посмотритеОбъяснение генератора Ruan Yifeng
  • мудрецы используют функции генератора для получения эффектов (текстовых объектов, содержащих инструкции).
  • Функция функции-генератора состоит в том, чтобы приостановить выполнение и возобновить выполнение с того места, где оно было в последний раз приостановлено, при повторном выполнении.
  • Эффект — это простой объект, который содержит некоторую информацию, объясняющую выполнение промежуточному программному обеспечению.
  • Вы можете создавать эффекты с помощью API эффектов, таких как fork, call, take, put, cancel и т. д.

классификация редукс-саги

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

Основное введение было завершено, когда закончено после демо, оглянуться назадофициальный сайт редукс-сагиИли, как объяснялось выше, может быть более глубокий опыт

Реализовать асинхронный счетчик с помощью redux-saga

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

1. Измените действия/counter.js

  • Тип действия, добавляющий асинхронный счетчик.
import * as Types from "../action-types";
let actions ={
    add(num){
        return{type:Types.INCREMENT,count:num}
    },
    minus(num){
        return{type:Types.DECREMENT,count:num}
    },
    //增加了一个异步记数的类型，用于在counter.js中派发动作
    async(num){
        return {type:Types.ADD_ASYNC}
    }
};
export default actions;

2. Ключевым моментом является добавление файла saga.js в каталог src.

//takeEvery=>负责监听  put=>派发动作   call=>告诉saga，执行delay，并传入1000作为参数
import {takeEvery,put,call} from "redux-saga/effects";
import * as Types from "./store/action-types";
const delay = ms=>new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve()
    },ms)
})
//saga分为三类 1、rootsaga 2、监听saga 3、worker干活的saga
function* add() {
    yield call(delay,1000);
    //就是指挥saga中间件向仓库派发动作
    yield put({type:Types.INCREMENT,count:10});
}
function* watchAdd() {
    //监听派发给仓库的动作，如果动作类型匹配的话，会执行对应的监听生成器
    yield takeEvery(Types.ADD_ASYNC,add)
}
export default function* rootSaga() {
    yield watchAdd()

}

Помните, что я сказал выше, классификация rudux-saga, корневая сага -> сага о наблюдателях -> сага о рабочих. Это будет отражено в этом коде, коде, который мы рассматриваем сверху вниз.

Рабочий процесс 2.1 саги (код снизу вверх)
  • По умолчанию экспортируется rootSaga, который является входным файлом saga.
  • watcher saga ->wactchAdd отвечает за мониторинг отправленных действий.Если тип действия совпадает, выполнить соответствующую рабочую сагу
  • Вышеприведенная сага о рабочих относится к функции добавления
2.2 redux-saga/эффекты побочные эффекты

При реальной разработке приложений мы хотим выполнять некоторые асинхронные (например, запросы Ajax) и нечистые операции (например, изменение внешнего состояния), которые в парадигме функционального программирования называются «побочными эффектами».

  • takeEvery=>Отвечает за мониторинг, мониторинг действий, отправляемых на склад, если тип действия совпадает, будет выполнен соответствующий генератор мониторинга->добавить
  • put=>действие отправки, которое можно понимать как отправку
  • call=>Скажите саге, чтобы она выполнила функцию задержки и передала параметры. Примечание. Функция задержки должна возвращать обещание.

На этом процесс завершен, а затем выполните rootSaga в магазине.

3. Введите rootSaga в хранилище/индекс

    import {createStore,applyMiddleware} from 'redux';
    import createSagaMiddleware from "redux-saga"; //引入redux-saga
    import  rootSaga from "../saga" //引入我们上面写好的rootSaga
    import reducer from "./reducers"
    let sagaMiddleware =createSagaMiddleware(); //执行得到saga中间件
    let store = createStore(reducer,applyMiddleware(sagaMiddleware)); //使用中间件
    sagaMiddleware.run(rootSaga); //开始执行rootSaga
    export  default  store;

Нет никакого объяснения промежуточного программного обеспечения redux.Эта часть включает в себя много вещей и не проста для понимания.Цель написания этой серии статей состоит в том, чтобы сделать ее максимально простой для понимания всеми.Если вы хотите увидеть все redux анализ исходного кода, все сводки будут оставлены внизу репозитория кода.

4. Отправьте это асинхронное действие в компоненте Counter.js

  • Код точно такой же, как и в предыдущей статье, но добавлена ​​кнопка для реализации асинхронной работы.
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import {connect} from "react-redux";
import actions from "../store/actions/counter"
class Counter extends Component {
    render() {
        console.log(this.props);
        return(
            <div>
                <h1>{this.props.number}</h1>
                <button onClick={()=>{this.props.add(5)}}>+</button>
                <button onClick={()=>{this.props.minus(1)}}>-</button>
                //增加异步操作
                <button onClick={()=>{this.props.async()}}>异步加10</button>
            </div>
        )
    }
}
export default connect(state=>({
    ...state
}),actions)(Counter)

Конец, увидеть эффект. Видно, что после нажатия подождите 1 с, прежде чем добавить 10. Затем мы можем передать выполненную асинхронную функцию (такую ​​как ajax) в call() для получения данных. Функция задержки, соответствующая нашему примеру

Наконец, просмотрите весь процесс

  • 1. This.props.async() вызывается в компоненте, и возвращаемый объект действия => {type:Types.ADD_ASYNC} будет отправлен в методе подключения.

  • 2. TakeEvery(Types.ADD_ASYNC,add) в саге, после наблюдения за типом действия запускаем worker saga => add

  • 3. В саге о рабочих первый вызов yield (delay, 1000); выполнить метод задержки с задержкой 1 с.

  • 4. yield put({type:Types.INCREMENT,count:10}); Тип INCREMENT, наконец, отправляется

  • 5. Затем он обрабатывается редюсером, и состояние обновляется.

  • 6. Обновление страницы

  • Больше качественных статей для ознакомления

  • REDUX парсинг всего исходного кода

Категории