記錄一篇關(guān)于redux-saga的基本使用過(guò)程

安裝

登封網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,登封網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為登封成百上千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的登封做網(wǎng)站的公司定做！

npm install --save redux
npm install --save redux-saga

配置action

actionType

創(chuàng)建文件src/actions/types.js，在types.js文件中添加需要的action類(lèi)型

export const TEST1_ACTION = 'test1';
export const SET_TEST2_ACTION = 'change_test2';
export const SET_TEST3_ACTION = 'change_test3';

createActions

創(chuàng)建文件src/actions/test.js，在test.js文件中編寫(xiě)action

import {TEST1_ACTION, SET_TEST2_ACTION, SET_TEST3_ACTION} from './types

// 獲取test1的值
export const getTest1Action = () => {
  return {
    type:TEST1_ACTION
  }
}

// 寫(xiě)入test2的值
export const setTest2Action = (testValue) => {
  return {
    type:SET_TEST2_ACTION,
    payload:testValue
  }
}

// 寫(xiě)入test3的值
export const setTest3Action = (payload) => {
  return {
    type:SET_TEST3_ACTION,
    payload
  }
}

配置reducer

因?yàn)橐粋€(gè)項(xiàng)目中可能會(huì)有很多地方需要用到reducer，所以把這些reducer文件分開(kāi)管理比較好，比如：test.js,settings.js,auth.js等等。

創(chuàng)建文件src/reducers/test.js，編寫(xiě)test reducer

import {TEST1_ACTION, SET_TEST2_ACTION, SET_TEST3_ACTION} from '../actions/types

// 初始化
const initTest = {
  test1:'這是test1初始化的值',
  test2:'這是test2初始化的值',
  test3:'這是test3初始化的值'
}

export default (state = initTest, action) =>{
  switch (action.type) {
    case TEST1_ACTION:{
      return {
        ...state
      }
    }
    case SET_TEST2_ACTION:{
      return {
        ...state,
        test2:action.payload
      }
    }
    case SET_TEST3_ACTION:{
      return {
        ...state,
        test3:action.payload.testValue
      }
    }
    default:
    return state
  }
}

創(chuàng)建文件src/reducers/index.js

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


const reducers = combineReducers({
  test,
  /*
  還可以繼續(xù)加入其它的reducer文件，比如：
  settings,
  auth,
  */
});

export default reducers;

配置saga

創(chuàng)建文件src/sagas/test.js

import {all,fork,put,takeEvery} from 'redux-saga/effects'
import {setTest2Action, setTest3Action} from "../actions/test"
import {SET_TEST2_ACTION, SET_TEST3_ACTION} from "../actions/actionTypes"
import axios from 'axios'

function* changeTest2 (testValue) {
  yield put(setTest2Action(testValue))
}

function* changeTest3 (obj) {
  try{
    // 這里使用axios從網(wǎng)絡(luò)獲取數(shù)據(jù)演示，沒(méi)有安裝axios的需要先安裝它。
    // 期間響應(yīng)狀態(tài)碼判斷就省略了，就當(dāng)它每次請(qǐng)求都成功獲得testValue的數(shù)據(jù)
    response = axios.get('http://localhost/api/test')
    
    // 假設(shè)response.data里面有一個(gè)key為testValue的值
    yield put(setTest3Action(response.data))
  } catch (error) {
    console.error('這里也可以yield put一個(gè)createAction，這里不作演示')
  }
}

export function* setTest2 () {
  yield takeEvery(SET_TEST2_ACTION, changeTest2)
}

export function* setTest3 () {
  yield takeEvery(SET_TEST3_ACTION, changeTest3)
}

export default function* testSaga(){
  yield all([
    fork(setTest2),
    fork(setTest3),
  ])
}

創(chuàng)建文件src/sagas/index.js

import {all} from 'redux-saga/effects';
import testSaga from './test'

export default function* rootSaga() {
  yield all([
    testSaga()
  ]);
}

配置store

import {applyMiddleware, compose, createStore} from 'redux';
import reducers from '../reducers/index';
import createSagaMiddleware from 'redux-saga';
import rootSaga from '../sagas/index';


const sagaMiddleware = createSagaMiddleware();

// 使用數(shù)組是為了方便以后繼續(xù)添加中間件
const middlewares = [sagaMiddleware];

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
 reducers,
 composeEnhancers(applyMiddleware(...middlewares))
);

sagaMiddleware.run(rootSaga);

export default store;

App入口文件路由配置

import React from 'react'
import {Provider} from 'react-redux'
import store from './store'
import Test from './Test/'
import {BrowserRouter, Route, Switch} from "react-router-dom"

const MainApp = () =>
 <Provider store={store}>
  <BrowserRouter>
   <Switch>
    <Route path="/" component={Test}/>
   </Switch>
  </BrowserRouter>
 </Provider>;

export default MainApp

Test.js

src/Test/index.js

import React from 'react'
import {connect} from 'react-redux'
import {setTest2Action, setTest3Action} from '../actions/test'

class Test extends React.Component {
  render() {

    const {test1, test2, test3, setTest2Action, setTest3Action} = this.props

    return {
      <div>
        <div>
          test1的值為：{test1}
        </div>
        <div>
          test2的值為：{test2}
          <button onClick={setTest2Action('abc')}>設(shè)置test2的值為 abc</button>
        </div>
        <div>
          test3的值為：{test3}
          <button onClick={setTest3Action()}>從網(wǎng)絡(luò)獲取test3的值</button>
        </div>
      </div>
    }
  }
}

const mapStateToProps = ({test}) => {
  const {test1,test2,test3} = test;
  return {test1,test2,test3}
}

export default connect (mapStateToProps,{setTest2Action, setTest3Action})(Test)

至此，即可運(yùn)行 npm start進(jìn)行測(cè)試了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：記錄一篇關(guān)于redux-saga的基本使用過(guò)程
網(wǎng)頁(yè)URL：http://aaarwkj.com/article6/pegdig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、虛擬主機(jī)、建站公司、移動(dòng)網(wǎng)站建設(shè)、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、網(wǎng)站排名

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

記錄一篇關(guān)于redux-saga的基本使用過(guò)程