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);
    }
}

• 在组件中调用

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>
  )
}