appstore-react v2.0—redux-actions和redux-saga的应用

开发文档

• https://redux-saga.js.org/
• https://redux-saga-in-chinese.js.org/
• https://redux-actions.js.org/

源码

代码已经上传到github中，欢迎star或者fork

appstore-react-v2.0

redux-saga

1、介绍

以前异步处理用的是redux-thunk + redux-actions + redux-promise，可是随着ES6中Generator的出现，人们发现用Generator处理异步能够更简单。而redux-saga就是用Generator来处理异步。
redux-saga文档并无说本身是处理异步的工具，而是说用来处理边际效应（side effects），这里的边际效应你能够理解为程序对外部的操做，好比请求后端，好比操做文件。
redux-saga一样是一个redux中间件，它的定位就是经过集中控制action，起到一个相似于MVC中控制器的效果。
同时它的语法使得复杂异步操做不会像promise那样出现不少then的状况，更容易进行各种测试。

2、 安装

npm install --save redux-saga

3、saga经常使用辅助函数

put、call、takeEvery、takeLatest

一、put和call

put至关于redux的dispatch的做用，而call至关于调用函数

export function* delayChangeBtnText() {
  yield delay(1000);
  yield put(changeBtnText('123'));
  yield call(consoleMsg, '完成改变');
}

二、takeEvery

它提供了相似 redux-thunk 的行为

import { takeEvery } from 'redux-saga'

function* watchFetchData() {
  yield* takeEvery('FETCH_REQUESTED', fetchData)
}

三、takeLatest

takeEvery 容许多个 fetchData 实例同时启动。在某个特定时刻，尽管以前还有一个或多个 fetchData 还没有结束，咱们仍是能够启动一个新的 fetchData 任务，
若是咱们只想获得最新那个请求的响应（例如，始终显示最新版本的数据）。咱们可使用 takeLatest辅助函数

import { takeLatest } from 'redux-saga'

function* watchFetchData() {
  yield* takeLatest('FETCH_REQUESTED', fetchData)
}

4、使用

一、修改store/index.js

import { createStore, applyMiddleware } from 'redux';
// import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import {watchAppSearch} from './sagas';
import rootReducer from './reducers';

/**
 * saga用法
 * 1.建立一个 Saga middleware
 * 2.使用 applyMiddleware 将 middleware 链接至 Store
 * 3.使用 sagaMiddleware.run(helloSaga) 运行 Saga
 */
const sagaMiddleware = createSagaMiddleware();


// 建立store的时候，第二个参数是中间件，redux-thunk提供了一个thunk中间件，用于处理异步的action
let store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

// 运行并监控各个action
sagaMiddleware.run(watchAppSearch);

export default store

二、建立store/sagas.js

import { put, call, takeEvery,takeLatest } from 'redux-saga/effects';
import { actionCreators } from './action'
import $api from '../api/index.js';
/**
 * 处理编辑效应的函数
 */
export function* appSearch(action) {
  // 在saga中这里经过action.payload获取到前台传过来的keyword内容   
  const p = function(){
    return $api.lookUp({
      keyword:action.payload
    })
    .then(res => res.results)
    .then(res =>{
      return res
    })
  }
  const res = yield call(p); // 执行p函数，返回值赋值给res
  yield put(actionCreators.saveSearchList(res));// 经过put触发dispatch ，将返回数据传过去
}
/**
 * 监控Action的函数
 */
// takeLatest 和 takeEvery 不一样，在任什么时候刻 takeLatest 只容许一个 fetchData 任务在执行。
// 而且这个任务是最后被启动的那个。 若是已经有一个任务在执行的时候启动另外一个 fetchData ，那以前的这个任务会被自动取消。
export function* watchAppSearch() {
  yield takeEvery(actionCreators.appSearch, appSearch);
}

三、同时启动多个Sagas 监听action动做

// 同时启动多个Sagas  监听action动做
export default function* rootSaga() {
  yield all([
    takeLatest(actionCreators.appSearch, appSearch),
    takeLatest(actionCreators.getRecommendList, getRecommendList)
  ])
}

/**
 * app搜索获取结果列表
 */
export function* appSearch(action) {
  // 在saga中这里经过action.payload获取到前台传过来的keyword内容   
  const p = function(){
    return $api.lookUp({
      keyword:action.payload
    })
    .then(res => res.results)
    .then(res =>{
      return res
    })
  }
  const res = yield call(p); // 执行p函数，返回值赋值给res
  yield put(actionCreators.saveSearchList(res));// 经过put触发dispatch ，将返回数据传过去
}


/**
 * 请求获取推荐列表
 * @param {*} action 
 */
export function* getRecommendList(action) { 
  const p = function(){
    return $api.recommendData({})
    .then(res => res.feed)
    .then(res =>{
      return res
    })
  }
  const res = yield call(p); // 执行p函数，返回值赋值给res
  yield put(actionCreators.getRecommendListSucceeded(res.entry));
}

redux-actions

redux-actions用来简化redux重复代码，这部分简化工做主要集中在构造action和处理reducers方面。

1、安装

npm install --save redux-actions

2、使用

-----action.js

import * as types from './action-types'
import { createActions } from 'redux-actions';

/**
 * 使用redux-actions以前
 */
// export const saveSearchList = (searchList) => {
//   console.log('searchList',searchList)
//   return {
//     type: types.SAVE_SERACH_LIST,
//     searchList
//   }
// }

// export const removeSearchList = () => {
//   return {
//     type: types.REMOVE_SERACH_LIST
//   }
// }

/**
 * 使用redux-actions以后
 */
// 使用createAction建立单个动做
// export const saveSearchList = createAction(types.SAVE_SERACH_LIST,searchList=>searchList);
// export const removeSearchList = createAction(types.REMOVE_SERACH_LIST);

// 使用createActions建立多个动做
export const actionCreators = createActions({
  [types.SAVE_SEARCH_LIST]:searchList=>searchList,
  [types.REMOVE_SEARCH_LIST]:()=>null
});

-----reducer.js

import * as types from './action-types'
import { handleActions } from 'redux-actions';

let defaultState = {
  searchList: []//搜索结果列表
}

/**
 * 使用redux-actions以前
 */
// 修改state
// export default(state = defaultState, action={})=>{
//   switch (action.type) {
//     case types.SAVE_SERACH_LIST:
//       return {
//         ...state,
//         searchList: action.searchList
//       }
//     case types.REMOVE_SERACH_LIST:
//       return{
//         ...state,
//         searchList:[]
//       }
//     default:
//       return state
//   }
// }

/**
 * 使用redux-actions以后
 */
// handleAction单个action处理
// const reducer = handleAction(types.SAVE_SERACH_LIST,(state, action)=>{
//   return {
//     ...state,
//     searchList: action.searchList
//   }
// },defaultState);


// 使用handleActions处理多个actions  ,这里须要注意的是  经过action.payload获取传过来的数据
const reducerCreators = handleActions({
  [types.SAVE_SEARCH_LIST]:(state, action)=>{
    return {
      ...state,
      searchList: action.payload
    }
  },
  [types.REMOVE_SEARCH_LIST]:(state, action)=>{
    return{
      ...state,st
      searchList:[]
    }
  }
},defaultState);

export default reducerCreators;

---index.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from '../../store/action'
/**
 * 使用redux-action以前
 */
// const mapDispatchToProps = (dispatch) => ({
  // 分发由action creators建立的actions
//   saveSearchList: searchList => dispatch(saveSearchList(searchList)),
//   removeSearchList: () => dispatch(removeSearchList())
// })


/**
 * 使用redux-action以后
 */
// createActions会返回一个对象，对象针对每一个action类型都有一个值为action工厂的属性，属性名为action类型的值去掉下划线后的驼峰命名
const mapDispatchToProps = {
  saveSearchList:actionCreators.saveSearchList,
  removeSearchList:actionCreators.removeSearchList
}


// 经过connect生成容器组件
export default connect(mapStateToProps,mapDispatchToProps)(SearchResult);

源码

代码已经上传到github中，欢迎star或者fork

appstore-react-v2.0

参考阅读

• https://juejin.im/post/5b41641ef265da0f8202126d
• https://www.jianshu.com/p/d2615a7d725e
• https://segmentfault.com/a/1190000017064759?utm_source=tag-newest