React immer与Redux Toolkit使用教程详解

 更新时间:2022年10月18日 11:33:24   作者:月光晒了很凉快  
这篇文章主要介绍了React中immer与Redux Toolkit的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧

1. immer

概述:

它和immutable相似的,实现了操作对象的数据共享,可以优化性能。它实现的原理使用es6的Proxy完成的。小巧,没有像immutable哪样有新数据类型,而是使用js类型。

安装:

yarn add immer@9

1.1 setState结合immer使用

简单使用:

import React from 'react'
// 把源数据使用Proxy进行代理处理,后面就可以精准的去找到变化的数据
import { produce } from 'immer'
const state = {
  count: 1
}
// 进行代理后,并修改
// draft就是代理对象,它就是state代理对象
const newState = produce(state, draft => {
  draft.count++
})
console.log(newState.count)// 2
const App = () => {
  return <div></div>
}
export default App

使用immer进行proxy代理,源数据中只有变化的了的数据才更新,没有变化则共享,这样做可以提高性能:

import React from 'react'
// 把源数据使用Proxy进行代理处理,后面就可以精准的去找到变化的数据
import { produce } from 'immer'
const baseState = {
  arr: [1, 2, 3],
  obj: { id: 1, name: '张三' }
}
// 使用immer进行proxy代理,源数据中只有变化的了的数据才更新,没有变化则共享,提高性能
const newState = produce(baseState, draft => {
  draft.arr.push(4)
})
// 当前只修改数组,对象没有修改,共享
console.log('arr', newState.arr === baseState.arr) // false
console.log('obj', newState.obj === baseState.obj) // true
const App = () => {
  return <div></div>
}
export default App

使用 immer 优化 setState 使用:

import React, { Component } from 'react'
import { produce } from 'immer'
// 优化setState更新数据
class App extends Component {
  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来优化setState操作
    this.setState(
      produce(draft => {
        // 不用返回,返加不允许,draft它是一个代理对象,修改后,它能监听到数据的变化,更新视图
        draft.count++
      })
    )
  }
  render() {
    return (
      <div>
        <h3>{this.state.count}</h3>
        <button onClick={this.addCount}>++++++</button>
        <hr />
        {this.state.carts.map((item, index) => (
          <li key={item.id}>
            <span>{item.name}</span>
            <span>---</span>
            <span>
              {item.num} --
              <button
                onClick={() => {
                  this.setState(
                    produce(draft => {
                      // draft它就是当前的this.state
                      draft.carts[index].num++
                    })
                  )
                }}
              >
                ++++
              </button>
            </span>
          </li>
        ))}
      </div>
    )
  }
}
export default App

1.2 useState结合immer使用

import React, { useState } from 'react'
import { produce } from 'immer'
const App = () => {
  // 普通的数字,不是proxy代理,proxy代理的是对象
  // 如果它是一个普通值,没有必要使用immer来完成优化操作
  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
        onClick={() => {
          // 之前的写法
          // setCount(v => v + 1)
          setCount(produce(draft => draft + 1))
        }}
      >
        +++count+++
      </button>
      <hr />
      <button
        onClick={() => {
          setCarts(
            produce(draft => {
              draft.push({ id: Date.now(), num: 1, name: 'aaaa--' + Date.now() })
            })
          )
        }}
      >
        添加商品
      </button>
      {carts.map((item, index) => (
        <li key={item.id}>
          <span>{item.name}</span>
          <span>---</span>
          <span>
            {item.num} --
            <button
              onClick={() => {
                setCarts(
                  produce(draft => {
                    // 不能返回,写上去感觉就像在vue的感觉
                    draft[index].num++
                  })
                )
              }}
            >
              ++++
            </button>
          </span>
          <span
            onClick={() => {
              setCarts(
                produce(draft => {
                  draft.splice(index, 1)
                })
              )
            }}
          >
            删除
          </span>
        </li>
      ))}
    </div>
  )
}
export default App

1.3 immer和redux集合

redux/index.js:

import { createStore } from 'redux'
import { produce } from 'immer'
const initState = {
  count: 100
}
// 以前的写法
/* const reducer = (state = initState, { type, payload }) => {
  if ('add' === type) {
    // 深复制
    return { ...state, count: state.count + payload }
  }
  return state
} */
const reducer = produce((draft, { type,  payload }) => {
  // 写法就和vuex中的mutation中的写法一样的,简化了
  // 操作数据无需深复制,提升性能
  if ('add' === type) draft.count += payload
}, initState)
export default createStore(reducer)

前端页面:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
const App = () => {
  const dispatch = useDispatch()
  const count = useSelector(state => state.count)
  return (
    <div>
      <h3>{count}</h3>
      <button
        onClick={() => {
          dispatch({ type: 'add', payload: 2 })
        }}
      >
        ++++
      </button>
    </div>
  )
}
export default App

2. Redux Toolkit

概述:

它开箱即用的高效 Redux 开发工具集,是 redux 新的库,也是官方推荐今后在项目中使用的 redux 库,内置了immer、redux-thunk和redux-devtools。

安装:

yarn add @reduxjs/toolkit react-redux

使用:

前台页面:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
const App = () => {
  const dispatch = useDispatch()
  const count = useSelector(state => state.count)
  return (
    <div>
      <h3>{count}</h3>
      <button
        onClick={() => {
          dispatch({ type: 'add', payload: 2 })
        }}
      >
        ++++
      </button>
    </div>
  )
}
export default App

redux入口文件:

import { configureStore } from '@reduxjs/toolkit'
// 上来它就是分模块,在项目中,所以的数据一定是分模块来管理的
import count from './modules/count'
import user from './modules/users'
export default configureStore({
  reducer: {
    count,
    user
  }
})

同步操作(count.js):

import { createSlice } from '@reduxjs/toolkit'
// 同步操作
const countSlice = createSlice({
  // 命名空间名称,比redux中更好,redux没有
  // 它的名称要和入口文件中configureStore中的reducer配置对象中的key名称要一致
  name: 'count',
  // 初始化数据源
  initialState: {
    num: 10 
  },
  // 修改数据源的方法集合
  reducers: {
    // 组件中派发dispatch(setNum(2)) // 2就会给payload
    // state它就是proxy对象[immer]
    setNum(state, { payload }) {
      state.num += payload
    }
  }
})
// 导出给在组件中调用
export const { setNum } = countSlice.actions
// 把当前模块的reducer导入,集合到大的reducer中
export default countSlice.reducer

异步操作(users.js):

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
// 方案2
// 写在上面,进行网络请求
export const fetchUser = createAsyncThunk('user/fetchUser', async page => {
  // 实现异步数据获取
  let ret = await (await fetch('/api/users?page=' + page)).json()
  // return 中的数据就是返回到state中的users中的数据  一定要return
  return ret.data
})
// 异步操作
const userSlice = createSlice({
  name: 'user',
  initialState: {
    users: []
  },
  reducers: {
    setUsers(state, { payload }) {
      state.users = payload
    }
  },
  // 解决异步
  extraReducers: builder => {
    // 模拟了promise的3个状态,只取成功状态 fulfilled
    // payload中的数据就是fetchUser方法它return出来的数据
    builder.addCase(fetchUser.fulfilled, (state, { payload }) => {
      state.users = payload
    })
  }
})
export const { setUsers } = userSlice.actions
// 网络请求  --- 内置redux-thunk所以,就可以在此处完成异步操作  -- 我推荐的
// 方案1
export const fetchThunkUser = () => async dispatch => {
  let ret = await (await fetch('/api/users')).json()
  dispatch(setUsers(ret.data))
}
export default userSlice.reducer

到此这篇关于React immer与Redux Toolkit使用教程详解的文章就介绍到这了,更多相关React immer与Redux Toolkit内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决react中useState状态异步更新的问题

    解决react中useState状态异步更新的问题

    本文主要介绍了react中useState状态异步更新的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • React应用框架Dva数据流向原理总结分析

    React应用框架Dva数据流向原理总结分析

    这篇文章主要为大家介绍了React 应用框架Dva数据流向原理总结分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • React合成事件详解

    React合成事件详解

    这篇文章主要介绍了React合成事件的相关资料,帮助大家更好的理解和学习使用React,感兴趣的朋友可以了解下
    2021-05-05
  • React项目配置axios和反向代理和process.env环境配置等问题

    React项目配置axios和反向代理和process.env环境配置等问题

    这篇文章主要介绍了React项目配置axios和反向代理和process.env环境配置等问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • React中常见的TypeScript定义实战教程

    React中常见的TypeScript定义实战教程

    这篇文章主要介绍了React中常见的TypeScript定义实战,本文介绍了Fiber结构,Fiber的生成过程,调和过程,以及 render 和 commit 两大阶段,需要的朋友可以参考下
    2022-10-10
  • React Native使用Modal自定义分享界面的示例代码

    React Native使用Modal自定义分享界面的示例代码

    本篇文章主要介绍了React Native使用Modal自定义分享界面的示例代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-10-10
  • 详解三种方式在React中解决绑定this的作用域问题并传参

    详解三种方式在React中解决绑定this的作用域问题并传参

    这篇文章主要介绍了详解三种方式在React中解决绑定this的作用域问题并传参,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • ReactQuery 渲染优化示例详解

    ReactQuery 渲染优化示例详解

    这篇文章主要为大家介绍了ReactQuery 渲染优化示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 一文带你深入理解React中的Context

    一文带你深入理解React中的Context

    React Context是React提供给开发者的一种常用的状态管理机制,本文主要来和大家讲讲为什么需要Context,又是如何使用Context的,感兴趣的可以了解一下
    2023-05-05
  • 减少react组件不必要的重新渲染实现方法

    减少react组件不必要的重新渲染实现方法

    这篇文章主要为大家介绍了减少react组件不必要的重新渲染实现方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论