redux-saga の導入と使用

それは何ですか？redux-saga は、非同期の問題を解決するための redux 用のミドルウェアです。Baidu にアクセスして詳細を検索できます。ここではあまり紹介しません

redux-sagaの使い方は？

まず、4 つのフォルダーに分かれている私の構造を見てください。

acions> はアクション定数を意味します> いくつかの変数の定義リデューサー> アクションサガも意味します> ミドルウェア処理

非同期リクエストApiの機能を実装してみよう

定数/index.jsを作成する

export const FETCH_REQUESTT = 'FETCH_REQUESTT'

aions/test.jsを作成する

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

Reducers/index.js を作成する

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

export default combineReducers({
  uss
})

ここではreduxのcombineReducersを使用しています具体的なリンクとは何ですか?リンクをクリックしてください

再度、reducers/test.js を作成します。

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

sagas/index.js を作成する

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

import rootUserr from './test'

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

  ])
}

sagas/test.jsを再度作成します

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

put、takeEvery、call がわからない場合は、Baidu を使用してください

上記の基本的なビジネスロジックが処理されました

これをエントリファイルindex.jsにラップする必要があります。


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')
)

インポートが完了すると、ページ内で使用できるようになります

ページ/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)

これで完了です。

GitHub にはより詳細な紹介リンクがあります

redux-sagaの使い方は？

おすすめ