image.png

几个问题

总结

image.png

Redux使用的痛点

image.png

为什么要使用Redux

image.png

如何优化Redux

redux-actions

初始化reducer和action构造器时减少样板代码
更多具体操作()https://www.jianshu.com/p/d2615a7d725e

减少action固定的方法

createAction：
创建action工厂的一个操作，返回一个action工厂。
第一个参数：action类型
第二个参数：生成action的函数。此函数的可以传递参数，参数值为实际调用action工厂函数时传递的参数。

  1. import {INCREMENT,DECREMENT} from '../constant'
  2. //未优化前
  3. export const increment = (data)=>({type:INCREMENT,data:data});
  4. export const decrement = (data)=>({type:DECREMENT,data:data});
  6. export const incrementAsync = (data,time) =>{
  7.     return (dispatch)=>{
  8.         setTimeout(function(){
  9.             console.log(data);
  10.             dispatch(increment(data))
  11.         },time)
  12.     }
  13. }
  15. //优化后
  16. import { createAction } from 'redux-actions';
  17. export const increment = createAction([INCREMENT],(data)=>data);
  18. export const decrement = createAction([DECREMENT],(data)=>data);
  19. export const incrementAsync = createAction('incrementAsync',(data,time) =>{
  20.     return (dispatch)=>{
  21.         setTimeout(function(){
  22.             console.log(data);
  23.             dispatch(increment(data))
  24.         },time)
  25.     }
  26. });

减少reducer时固定的switch

  1. import {INCREMENT,DECREMENT} from '../constant'
  2. //未优化前
  3. const initState = 0;
  4. export default function countReducer(preState=initState,action){
  5.     const {type,data} = action
  6.     switch (type) {
  7.         case INCREMENT:
  8.             return preState + data
  9.         case DECREMENT:
  10.             return preState - data
  11.         default:
  12.             return preState
  13.     }
  14. }
  16. //优化后
  17. import { handleActions } from 'redux-actions';
  18. export default handleActions(
  19.     {
  20.         [INCREMENT]:(preState,action) => (preState + action.payload),
  21.         [DECREMENT]:(preState,action) => (preState - action.payload),
  22.     },0
  23. )

如何解决异步问题

总结

image.png

为什么redux处理不了异步问题

image.png

解决异步问题- 中间件(原理:改造dispatch)

Redux-thunk

store.js

//引入createStore，专门用于创建redux中最为核心的store对象
import {createStore,applyMiddleware} from 'redux'
//引入为Count组件服务的reducer
import reducer from './reducers'

//引入redux-thunk，用于支持异步action
import thunk from 'redux-thunk';

//暴露store
export default createStore(reducer,applyMiddleware(thunk))

Redux-saga

image.png