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

一、介绍

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

二、 安装

npm install --save redux-saga

三、saga常用辅助函数

put、call、takeEvery、takeLatest

1、put和call

put相当于redux的dispatch的作用，而call相当于调用函数

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

2、takeEvery

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

import { takeEvery } from 'redux-saga'

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

3、takeLatest

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

import { takeLatest } from 'redux-saga'

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

四、使用

1、修改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

2、创建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);
}

3、同时启动多个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方面。

一、安装

npm install --save redux-actions

二、使用

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