Reactimmer與ReduxToolkit使用教程詳解

第Reactimmer與ReduxToolkit使用教程詳解目錄1.immer1.1setState結合immer使用1.2useState結合immer使用1.3immer和redux集合2.ReduxToolkit

1.immer

概述：

它和immutable相似的，實現(xiàn)了操作對象的數(shù)據共享，可以優(yōu)化性能。它實現(xiàn)的原理使用es6的Proxy完成的。小巧，沒有像immutable哪樣有新數(shù)據類型，而是使用js類型。

安裝：

yarnaddimmer@9

1.1setState結合immer使用

簡單使用：

importReactfrom'react'

//把源數(shù)據使用Proxy進行代理處理,后面就可以精準的去找到變化的數(shù)據

import{produce}from'immer'

conststate={

count:1

//進行代理后，并修改

//draft就是代理對象，它就是state代理對象

constnewState=produce(state,draft={

draft.count++

console.log(newState.count)//2

constApp=()={

returndiv/div

exportdefaultApp

使用immer進行proxy代理，源數(shù)據中只有變化的了的數(shù)據才更新，沒有變化則共享，這樣做可以提高性能：

importReactfrom'react'

//把源數(shù)據使用Proxy進行代理處理,后面就可以精準的去找到變化的數(shù)據

import{produce}from'immer'

constbaseState={

arr:[1,2,3],

obj:{id:1,name:'張三'}

//使用immer進行proxy代理，源數(shù)據中只有變化的了的數(shù)據才更新，沒有變化則共享，提高性能

constnewState=produce(baseState,draft={

draft.arr.push(4)

//當前只修改數(shù)組，對象沒有修改，共享

console.log('arr',newState.arr===baseState.arr)//false

console.log('obj',newState.obj===baseState.obj)//true

constApp=()={

returndiv/div

exportdefaultApp

使用immer優(yōu)化setState使用：

importReact,{Component}from'react'

import{produce}from'immer'

//優(yōu)化setState更新數(shù)據

classAppextendsComponent{

state={

count:100,

carts:[

{id:1,name:'aa',num:1},

{id:2,name:'bb',num:2}

addCount=()={

//原來的寫法

//this.setState(state=({count:state.count+1}))

//使用immer來優(yōu)化setState操作

this.setState(

produce(draft={

//不用返回，返加不允許，draft它是一個代理對象，修改后，它能監(jiān)聽到數(shù)據的變化，更新視圖

draft.count++

render(){

return(

div

h3{this.state.count}/h3

buttonthis.addCount}++++++/button

hr/

{this.state.carts.map((item,index)=(

likey={item.id}

span{}/span

span/span

span

{item.num}--

button

()={

this.setState(

produce(draft={

//draft它就是當前的this.state

draft.carts[index].num++

++++

/button

/span

/li

/div

exportdefaultApp

1.2useState結合immer使用

importReact,{useState}from'react'

import{produce}from'immer'

constApp=()={

//普通的數(shù)字，不是proxy代理，proxy代理的是對象

//如果它是一個普通值，沒有必要使用immer來完成優(yōu)化操作

let[count,setCount]=useState(100)

//對象類型才是使用immer工作的場景

let[carts,setCarts]=useState([

{id:1,name:'aa',num:1},

{id:2,name:'bb',num:2}

return(

div

h3{count}/h3

button

()={

//之前的寫法

//setCount(v=v+1)

setCount(produce(draft=draft+1))

+++count+++

/button

hr/

button

()={

setCarts(

produce(draft={

draft.push({id:Date.now(),num:1,name:'aaaa--'+Date.now()})

添加商品

/button

{carts.map((item,index)=(

likey={item.id}

span{}/span

span/span

span

{item.num}--

button

()={

setCarts(

produce(draft={

//不能返回，寫上去感覺就像在vue的感覺

draft[index].num++

++++

/button

/span

span

()={

setCarts(

produce(draft={

draft.splice(index,1)

/span

/li

/div

exportdefaultApp

1.3immer和redux集合

redux/index.js：

import{createStore}from'redux'

import{produce}from'immer'

constinitState={

count:100

//以前的寫法

/*constreducer=(state=initState,{type,payload})={

if('add'===type){

//深復制

return{...state,count:state.count+payload}

returnstate

constreducer=produce((draft,{type,payload})={

//寫法就和vuex中的mutation中的寫法一樣的，簡化了

//操作數(shù)據無需深復制，提升性能

if('add'===type)draft.count+=payload

},initState)

exportdefaultcreateStore(reducer)

前端頁面：

importReactfrom'react'

import{useSelector,useDispatch}from'react-redux'

constApp=()={

constdispatch=useDispatch()

constcount=useSelector(state=state.count)

return(

div

h3{count}/h3

button

()={

dispatch({type:'add',payload:2})

++++

/button

/div

exportdefaultApp

2.ReduxToolkit

概述：

它開箱即用的高效Redux開發(fā)工具集，是redux新的庫，也是官方推薦今后在項目中使用的redux庫，內置了immer、redux-thunk和redux-devtools。

安裝：

yarnadd@reduxjs/toolkitreact-redux

使用：

前臺頁面：

importReactfrom'react'

import{useSelector,useDispatch}from'react-redux'

constApp=()={

constdispatch=useDispatch()

constcount=useSelector(state=state.count)

return(

div

h3{count}/h3

button

()={

dispatch({type:'add',payload:2})

++++

/button

/div

exportdefaultApp

redux入口文件：

import{configureStore}from'@reduxjs/toolkit'

//上來它就是分模塊，在項目中，所以的數(shù)據一定是分模塊來管理的

importcountfrom'./modules/count'

importuserfrom'./modules/users'

exportdefaultconfigureStore({

reducer:{

count,

user

})

同步操作（count.js）：

import{createSlice}from'@reduxjs/toolkit'

//同步操作

constcountSlice=createSlice({

//命名空間名稱，比redux中更好，redux沒有

//它的名稱要和入口文件中configureStore中的reducer配置對象中的key名稱要一致

name:'count',

//初始化數(shù)據源

initialState:{

num:10

//修改數(shù)據源的方法集合

reducers:{

//組件中派發(fā)dispatch(setNum(2))//2就會給payload

//state它就是proxy對象[immer]

setNum(state,{payload}){

state.num+=payload

//導出給在組件中調用

exportconst{setNum}=countSlice.actions

//把當前模塊的reducer導入，集合到大的reducer中

exportdefaultcountSlice.reducer

異步操作（users.js）：

import{createSlice,createAsyncThunk}from'@reduxjs/toolkit'

//方案2

//寫在上面,進行網絡請求

exportconstfetchUser=createAsyncThunk('user/fetchUser',asyncpage={

//實現(xiàn)異步數(shù)據獲取

letret=await(awaitfetch('/api/userspage='+page)).json()

//return中的數(shù)據就是返回到state中的users中的數(shù)據一定要return

returnret.data

//異步操作

constuserSli