Reactimmer與ReduxToolkit使用教程詳解

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

1.immer

概述：

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

安裝：

yarnaddimmer@9

1.1setState結(jié)合immer使用

簡(jiǎn)單使用：

importReactfrom'react'

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

import{produce}from'immer'

conststate={

count:1

//進(jìn)行代理后，并修改

//draft就是代理對(duì)象，它就是state代理對(duì)象

constnewState=produce(state,draft={

draft.count++

console.log(newState.count)//2

constApp=()={

returndiv/div

exportdefaultApp

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

importReactfrom'react'

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

import{produce}from'immer'

constbaseState={

arr:[1,2,3],

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

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

constnewState=produce(baseState,draft={

draft.arr.push(4)

//當(dāng)前只修改數(shù)組，對(duì)象沒(méi)有修改，共享

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ù)據(jù)

classAppextendsComponent{

state={

count:100,

carts:[

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

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

addCount=()={

//原來(lái)的寫(xiě)法

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

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

this.setState(

produce(draft={

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

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它就是當(dāng)前的this.state

draft.carts[index].num++

++++

/button

/span

/li

/div

exportdefaultApp

1.2useState結(jié)合immer使用

importReact,{useState}from'react'

import{produce}from'immer'

constApp=()={

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

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

let[count,setCount]=useState(100)

//對(duì)象類(lèi)型才是使用immer工作的場(chǎng)景

let[carts,setCarts]=useState([

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

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

return(

div

h3{count}/h3

button

()={

//之前的寫(xiě)法

//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={

//不能返回，寫(xiě)上去感覺(jué)就像在vue的感覺(jué)

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

//以前的寫(xiě)法

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

if('add'===type){

//深復(fù)制

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

returnstate

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

//寫(xiě)法就和vuex中的mutation中的寫(xiě)法一樣的，簡(jiǎn)化了

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

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

},initState)

exportdefaultcreateStore(reducer)

前端頁(yè)面：

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

概述：

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

安裝：

yarnadd@reduxjs/toolkitreact-redux

使用：

前臺(tái)頁(yè)面：

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'

//上來(lái)它就是分模塊，在項(xiàng)目中，所以的數(shù)據(jù)一定是分模塊來(lái)管理的

importcountfrom'./modules/count'

importuserfrom'./modules/users'

exportdefaultconfigureStore({

reducer:{

count,

user

})

同步操作（count.js）：

import{createSlice}from'@reduxjs/toolkit'

//同步操作

constcountSlice=createSlice({

//命名空間名稱(chēng)，比redux中更好，redux沒(méi)有

//它的名稱(chēng)要和入口文件中configureStore中的reducer配置對(duì)象中的key名稱(chēng)要一致

name:'count',

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

initialState:{

num:10

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

reducers:{

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

//state它就是proxy對(duì)象[immer]

setNum(state,{payload}){

state.num+=payload

//導(dǎo)出給在組件中調(diào)用

exportconst{setNum}=countSlice.actions

//把當(dāng)前模塊的reducer導(dǎo)入，集合到大的reducer中

exportdefaultcountSlice.reducer

異步操作（users.js）：

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

//方案2

//寫(xiě)在上面,進(jìn)行網(wǎng)絡(luò)請(qǐng)求

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

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

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

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

returnret.data

//異步操作

constuserSli