React笔记（九）RTK-Toy模板网

这篇具有很好参考价值的文章主要介绍了React笔记（九）RTK。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、RTK的简介

1、官网地址

Redux Toolkit: 概览 | Redux 中文官网

2、Redux toolkit是什么

Redux Toolkit 是 Redux 官方强烈推荐，开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式，我们强烈建议你使用它。

它包括几个实用程序功能，这些功能可以简化最常见场景下的 Redux 开发，包括配置 store、定义 reducer，不可变的更新逻辑、甚至可以立即创建整个状态的 “切片 slice”，而无需手动编写任何 action creator 或者 action type。它还自带了一些最常用的 Redux 插件，例如用于异步逻辑 Redux Thunk，用于编写选择器 selector 的函数 Reselect ，你都可以立刻使用。

二、RTK入门使用

1、安装依赖

yarn add react-redux
yarn add @reduxjs/toolkit

2、目录结构

|-src
    |-store
        |-modules
            |-shopcartList.js
            |-counter.js
        |-index.js

3、创建slice切片

位置:src/store/modules/counter.js

import {createSlice} from '@reduxjs/toolkit'
const counter=createSlice({
    //命名空间，name值会作为action type的前缀
    name:'counter',
    //初始化状态
    initialState:{
        count:0
    },
    //定义reducer更新状态的函数
    reducers:{
        increment(state,action){
            state.count=state.count+action.payload
        },
        subtraction(state,action){
            state.count=state.count-action.payload
        }
    }
})
//导出action函数
export const {increment,subtraction}=counter.actions
//导出reducer
export default counter.reducer

4、创建store

位置：src/store/index.js

import {configureStore} from '@reduxjs/toolkit'
import counter from './modules/counter'
const store=configureStore({
  reducer:{
    counter
  }  
})
export default store

5、在入口集成redux

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

6、在组件中获取和更新状态

import React from 'react'
import {useSelector,useDispatch} from 'react-redux'
import {increment} from '../store/modules/counter'
export default function Counter() {
  const num=useSelector((state)=>{
    console.log('state',state);
    return state.counter.count
  })
  const dispatch=useDispatch()
  const add=(n)=>{
    dispatch(increment(n))
  }
  return (
    <div>
      <h1>计数器</h1>
      <div>{num}</div>
      <button onClick={()=>{add(2)}}>+</button>
    </div>
  )
}

三、RTK异步操作

编写异步方法

位置:src/store/modules/counter.js

export const subtractionAsync=(payload)=>{
    return async(dispatch,getState)=>{
        console.log('dipatch',dispatch);
        console.log('getState',getState());
        setTimeout(() => {
            dispatch(subtraction(payload))
        }, 4000);
    }
}

在组件中调用文章来源地址https://www.toymoban.com/news/detail-691156.html

import React from 'react'
import {useSelector,useDispatch} from 'react-redux'
import {subtractionAsync} from '../store/modules/counter'
export default function Counter() {
  const num=useSelector((state)=>{
    return state.counter.count
  })
  const dispatch=useDispatch()
  const jian=(n)=>{
    dispatch(subtractionAsync(n))
  }
  return (
    <div>
      <h1>计数器</h1>
      <div>{num}</div>
      <button onClick={()=>{jian(3)}}>异步-</button>
    </div>
  )
}

到了这里，关于React笔记（九）RTK的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！