React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > Redux Toolkit

如何使用Redux Toolkit简化Redux

作者:咸蛋超人l

redux-toolkit是目前redux官方推荐的编写redux逻辑的方法,针对redux的创建store繁琐、样板代码太多、依赖外部库等问题进行了优化,官方总结了四个特点是简易的/有想法的/强劲的/高效的,总结来看,就是更加的方便简单了

一、安装Redux Toolkit和React-Redux

注: “@reduxjs/toolkit”: “^1.8.6”, “react-redux”: “^8.0.4”

npm install @reduxjs/toolkit react-redux

二、创建Redux Store

从Redux Toolkit里引入configureStore,我们将从创建和导出一个空的Redux store开始。

store/index.js
// 使用rtk来创建store
import { configureStore } from '@reduxjs/toolkit'
import useReducer from './userSlice'
/* 
使用rtk的时候,reducer依然可以使用之前的创建不变
但是不再需要去合并reducer combineReducers
rtk提供了configureStore方法,直接接收一个对象作为参数
可以将reducer的相关配置直接通过这个对象进行传递,不再需单独合并reducer
reducer属性可以直接单独传递一个ruducer,也可以传递一个对象
*/
const store = configureStore({
  reducer: {
    user: useReducer
  }
})
export default store

三、在React中使用Redux Store

我们就可以在src/index.js文件中用React-Redux提供的包裹我们的应用,这样我们就可以在React组件中使用React store了

具体操作就是先引入我们刚刚创建的Redux store,然后用包裹你的,再将store作为一个prop传入。

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import { Provider } from 'react-redux'
import store from './store'
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

四、创建一个Redux State Slice

slice需要一个name作为唯一标识,需要有初始化state值,还需要至少一个reducer方法来定义state如何变化。一旦slice创建完成我们就可以导出生成的Redux action creators和整个slice的reducer方法。

Redux需要我们通过制作数据副本和更新副本来不可变地更新state。然而Redux Toolkit的createSlice 和 createReducer API内部使用了Immer,这允许我们可以直接写更新逻辑,不必制作副本,它将自动成为正确的不可变更新。

userSlice.js文件

// 切片对象
import { createSlice } from '@reduxjs/toolkit'
/* 
reducer切片
createSlice函数的作用:生成分片的reducer
内部调用的市createAction和createReducer 
creatSlice可以帮助我们用更少的代码去生成配套的reducer和action,而且有很好的维护性
*/
const userSlice = createSlice({
  name: 'zhangsan', // 标识符,生成actions的时候要使用,
  // state初始值
  initialState: {
    name: '张三',
    age: 18,
    gender: '男'
  } ,
  // reducer的具体方法,
  reducers: {
    // 指定state的各种操作,直接就可以在对象中添加方法
    setName(state, action) {
      /* 
      可以通过不同的方法修来指定对state的不同的操作
      state,action 
      可以直接修改state => state 是一个代理对象  之前的复制一份,返回一个新的对象
      */
      state.name = action.payload
    },
    setAge(state, action) {
      state.age = action.payload
    }
  }
})
/* 
切片对象会自动地帮助我们生成action
切片对象会根据我们地reducers方法来自动地创建action对象,这些action对象会保存到切片对象的actions中
{type:name/函数名,payload:函数的参数}
*/
// 实际开发中,setName,setAge对外暴露,
export const { setName, setAge } = userSlice.actions
export default userSlice.reducer

五、在React组件中使用Redux State和Action

现在我们可以使用React-Redux钩子在React组件中操作Redux store。我们可以使用useSelector从store中读取数据,也可以使用useDispatch来dispatch actions。

src/App.js

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { setName, setAge } from './store/userSlice'
export default function App() {
  const user = useSelector(state => state.user)
  const dispatch = useDispatch()
  const setNameHandler = () => {
    dispatch(setName('李四'))
  }
  const setAgeHandler = () => {
    dispatch(setAge(20))
  }
  return (
    <div>
      <h1>{user.name}</h1>
      <h1>{user.age}</h1>
      <h1>{user.gender}</h1>
      <button onClick={setNameHandler}>修改name</button>
      <button onClick={setAgeHandler}>修改年龄</button>
    </div>
  )
}

以上是关于如何在React中设置和使用 Redux Toolkit的简要概述。回顾细节:

1、使用configureStore创建一个Redux Store

2、在React组件中使用 Redux store

3、使用createSlice创建Redux “slice” reducer

4、在React组件中使用React-Redux的useSelector/useDispatch钩子

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

您可能感兴趣的文章:
阅读全文