React状态管理篇之RTK(reduxjs/toolkit）快速使用

rtk使用

0. 安装： cnpm i @reduxjs/toolkit
1. 搭建页面，创建 views 中放两个页面 home 和 kind
2. 创建数据请求的方法，在 api 中创建 home 和 kind 的数据请求方法
3. 在 home 页面中发送数据请求，考虑将数据请求的结果放在全局状态中
4. 创建一个 store 在该文件中创建一个 index.js 和 modules 状态模块
5. 在状态模块中定义一个 home.js 创建 一个切片

6.在store/index.js 中做模块配置，创建 store

7.在入口 Index.js 文件中配置 store

import React,{useEffect} from 'react';
import {getBannerList,getProList} from '../api/home'

import { changeBannerList, changeProList } from '../store/modules/home'

// useSelector: 是用来获取全局状态的方法
// useDispatch： 用来调用修改全局状态方法的
import { useSelector, useDispatch } from 'react-redux'

const Home = () => {

  // 获取 dispatch
  const dispatch = useDispatch()

  // 获取全局状态
  const bannerList = useSelector(state => state.home.bannerList)
  const proList = useSelector(state => state.home.proList)


  // 理解为生命周期替代方法，在挂载阶段会执行该函数
  // useEffect:会在挂载和更新时进行调用
  // 第一个参数是一个回调函数
  // 第二个参数是一个依赖项，如果不配置会在组件更新时调用，如果配置了依赖项
  // 那么就只有在依赖项发生改变的时候调用
  // 如果依赖项为一个空的数组，那么该函数就只会被调用一次
  useEffect(()=>{

    getBannerList().then(res => {
      console.log(res.data.data);
      // 将请求到的数据放在状态管理中
      dispatch(changeBannerList(res.data.data))
    })

    getProList({limitNum: 5}).then(res => {
      dispatch(changeProList(res.data.data))
    })

  },[dispatch])

  return (
    <div>
      首页内容
      <div>
        {bannerList && bannerList.map(item => {
          return (<img style={{height: 100}} src={item.img} key={item.bannerid} alt='' />)
        })}
      </div>

      <ol>
        {proList && proList.map(item => {
          return (<li key={item.proid}>{item.proname}</li>)
        })}

      </ol>
    </div>
  );
};

export default Home;

rtk 异步

直接状态模块中定义方法处理异步即可

注：在组件中直接调用这两个异步方法即可，如果有传递参数那么异步方法中要有个返回值