1、redux-saga的详细使用

工作原理：

1.1 generator的基本语法

工作原理:

2、reducer的拆分与合并

在之前的案例中，我们有counter计数器的案例与home数据的案例，在这两个案例中我们都是将更新状态所有的逻辑放在了一个reducer函数中进行执行，现在redux管理的状态比较少还比较方便，但是随着项目的不断扩大，会发现reducer里面需要处理的逻辑越来越多，这就会造成reducer这个纯函数变得难以维护，那么我们就需要将reducer函数进行相应的拆分，随后合并在一起，让不同的子reducer函数处理不同的逻辑，这样，不仅便于理解，还方便后期的维护与管理。

2.1 未拆分的reducer函数

  1. // 未拆分的reducer的处理方式
  2. import { INCREMENT, ADD_NUMBER, DECREMENT, SUB_NUMBER, CHANGE_BANNER, CHANGE_RECOMMEND } from './constants'
  4. const defaultState = {
  5.   counter: 100,
  6.   banner: [],
  7.   recommend: []
  8. }
  10. function reducer(state = defaultState, action) {
  11.   switch(action.type) {
  12.     // 处理number的逻辑
  13.     case INCREMENT:
  14.       return {...state, counter: state.counter + 1 }
  15.     case ADD_NUMBER:
  16.       return {...state, counter: state.counter + action.num }
  17.     case DECREMENT:
  18.       return {...state, counter: state.counter - 1 }
  19.     case SUB_NUMBER: 
  20.       return {...state, counter: state.counter - action.num }
  21.       // 处理banner和recommend
  22.     case CHANGE_BANNER: 
  23.       return {...state, banner: action.banner }
  24.     case CHANGE_RECOMMEND:
  25.       return {...state, recommend: action.recommend }
  26.     default:
  27.       return state
  28.   }
  29. }
  31. export default reducer;
  33. // 缺点：多个业务组件的状态全部杂糅在一起了，无法进行详细的区分，状态管理的逻辑都在一个函数中处理是不合理的。
  34. 所以在实际的业务开发中，我们需要将reducer函数进行拆分，让不同的子reducer函数处理不同的业务逻辑，这样的话，便于后期的项目状态的跟踪、调试与维护。

2.2 已拆分的reducer函数

  1. // 将reducer函数进行拆分
  2. import { INCREMENT, ADD_NUMBER, DECREMENT, SUB_NUMBER, CHANGE_BANNER, CHANGE_RECOMMEND } from './constants'
  4. // 子reducer的拆分
  5. const initialCounterState = {
  6.   counter: 100
  7. }
  8. function counterReducer(state = initialCounterState, action) {
  9.   switch(action.type) {
  10.     case INCREMENT:
  11.       return {...state, counter: state.counter + 1 }
  12.     case ADD_NUMBER:
  13.       return {...state, counter: state.counter + action.num }
  14.     case DECREMENT:
  15.       return {...state, counter: state.counter - 1 }
  16.     case SUB_NUMBER: 
  17.       return {...state, counter: state.counter - action.num }
  18.     default:
  19.       return state
  20.   }
  21. }
  23. // 子reducer的拆分
  24. const initialHomeState = {
  25.   banner: [],
  26.   recommend: []
  27. }
  28. function homeReducer(state = initialHomeState, action) {
  29.   switch(action.type) {
  30.     case CHANGE_BANNER: 
  31.       return {...state, banner: action.banner }
  32.     case CHANGE_RECOMMEND:
  33.       return {...state, recommend: action.recommend }
  34.     default:
  35.       return state
  36.   }
  37. }
  39. // 将上面两个子reducer进行相应的数据的合并
  40. function reducer(state = {}, action) {
  41.   return {
  42.     counterInfo: counterReducer(state.counterInfo, action),
  43.     homeInfo: homeReducer(state.homeInfo, action) 
  44.   }
  45. }
  47. export default reducer;

2.3 利用redux中的combineReducers将子reducer进行合并

  1. // 引入redux中的conbineReducers工具函数
  2. import { reducer as counterReducer } from './counter';
  3. import { reducer as homeReducer } from './home';
  5. import { conbineReducers } from 'redux';
  7. // 原始的合并方式 自己封装的
  8. //function reducer(state = {}, action) {
  9. //    return {
  10. //      counterInfo: counterReducer(state.counterInfo, action),
  11. //       homeInfo: homeReducer(state.homeInfo, action)
  12. // }
  13. //}
  15. // 这个是总的reducer合并的函数
  16. const reducer = combineReducers({
  17.     counterInfo: counterReducer,
  18.   homeInfo: homeReducer
  19. })
  21. // 将reducer函数进行导出 提供给具体的业务组件进行使用
  22. export default reducer;

:::tips 以上就是reducer合并的方法了，在实际项目的开发中，我们并不会自己手动进行合并，主要是调用redux提供合并的工具函数进行合并，操作比较简单、实用。
注意：

  • 在实际的业务组件中，使用redux中的state的时候，里面多做了一层的包裹，比如我们需要访问state的数据，就需要 这么使用 伪代码 state = state.counterInfo.state banner = state.homeInfo.banner :::