Einführung und Verwendung von Redux-Saga

Was ist es? redux-saga ist eine Middleware für Redux zur Lösung asynchroner Probleme. Sie können zu Baidu gehen, um nach Details zu suchen. Ich werde hier nicht zu viel vorstellen

Wie verwende ich Redux-Saga?

Schauen Sie sich zunächst meine Struktur an, aufgeteilt in vier Ordner

acions> bedeutet Aktionskonstanten> die Definition einiger Variablenreduzierer> bedeutet auch Aktionssagas> Middleware-Verarbeitung

Lassen Sie uns die Funktion der asynchronen Anforderungs-API implementieren

Erstellen Sie „constants/index.js“.

export const FETCH_REQUESTT = 'FETCH_REQUESTT'

Erstellen Sie acions/test.js

import { FETCH_REQUESTT} from './constants/index'
export const fetchuserr = () => {
  return {
    type: FETCH_REQUESTT 
  }

Erstellen Sie Reducers/index.js

import { combineReducers } from 'redux'
import uss from './test'

export default combineReducers({
  uss
})

 Hier wird der CombineReducers von Redux verwendet. Was ist der spezifische Link? Klicken Sie auf den Link

Erstellen Sie „reducers/test.js“ erneut

const initialState = {
  isFetch: false,
  error: null,
  user: null
}

const u = (state = initialState, action = {}) => {
  switch (action.type) {
    case 'FETCH_REQUESTT':
      return {
        isFetch: true,
        error: null,
        user: null
      }
    case 'FETCH_SUCESS':
      return {
        isFetch: false,
        error: null,
        user: action.uu
      }
    case 'FETCH_FAIL':
      return {
        isFetch: false,
        error: action.errors,
        user: null
      }

    default :
      return state
  }
}

export default u

Erstellen Sie sagas/index.js

import { all } from 'redux-saga/effects'

import rootUserr from './test'

export default function * rootSaga () {
  yield all([ // 同时并发多个
    
    ...rootUserr,

  ])
}

 Erstellen Sie sagas/test.js erneut

import { call, takeEvery, put } from 'redux-saga/effects'

import axios from 'axios'

function * fetchuserr () {
  try {
    const users = yield call(axios.get, 'https://jsonplaceholder.typicode.com/todos')
    console.log('users' + users)
    yield put({ type: 'FETCH_SUCESS', uu: users })
  } catch (e) {
    yield put({ type: 'FETCH_FAIL', errors: e })
  }
}

function * userr () {
  yield takeEvery('FETCH_REQUESTT', fetchuserr) // 正在加载数据
}

// 使用数组导出
const rootUserr = [
  userr()
]

export default rootUserr

Wenn Sie Put, TakeEvery, Call nicht verstehen, können Sie Baidu verwenden

Die obige grundlegende Geschäftslogik wurde verarbeitet

Wir müssen es in die Eintragsdatei index.js einbinden

 

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'


//中间件
import {Provider} from 'react-redux'  // 1，引用Provider
import {createStore,applyMiddleware} from 'redux'  //2,引用中间件

import createSagaMiddleware  from 'redux-saga'   //3,引入createSagaMiddleware  
import rootSaga from './pages/reduxsagas/sagas/index'; // 4，自己写的根 rootSaga

import rootReducer from './pages/reduxsagas/reducers/index'; //5，引入 reducers
const sagaMiddleware = createSagaMiddleware()  // 6， 创建中间件

const store = createStore(
  rootReducer,
    applyMiddleware(sagaMiddleware)
  )
)
// 4：启动 saga
sagaMiddleware.run(rootSaga);


ReactDOM.render(
 <Provider store={store}>

    <App />
 
  </Provider>,


 document.getElementById('root')
)

Nachdem der Import abgeschlossen ist, kann er auf der Seite verwendet werden

seiten/text.js

import React, { Component } from 'react'

import { connect } from 'react-redux'
import { Button, Card } from 'antd'
import {  fetchuserr } from './../reduxsagas/actions/counter'
class saga extends Component {


  render () {

    return (
      <div>

         <Button type='primary' onClick={() => this.props.fetchuserr()}>测试请求</Button>
       </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    // state 对应的 key, 在 reducers/index.js 中声明。

    userta: state.uss
  }
}

export default connect(mapStateToProps, {  fetchuserr })(saga)

Du bist fertig!

GitHub verfügt über einen detaillierteren   Einführungslink