Redux Toolkit 快速入门

最新推荐文章于 2024-07-08 16:22:29 发布

Majmunu

最新推荐文章于 2024-07-08 16:22:29 发布

阅读量127

点赞数

分类专栏： Redux React 文章标签： javascript react.js 前端 react typescript

本文链接：https://blog.csdn.net/weixin_46493816/article/details/134410573

版权

React 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

Redux

1 篇文章 0 订阅

订阅专栏

store.ts 创建仓库用来存储数据

import {configureStore} from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterslice";

export const store = configureStore({
   reducer:{
         counter:counterReducer
   }
})
export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

//文件的作用?，它是用来创建store的，store是redux的核心，它是一个对象，里面有很多属性，比如getState()，dispatch()，subscribe()等等
//RootState是什么？它是一个类型，是store.getState()的返回值类型，store.getState()返回的是一个对象，这个对象的类型就是RootState
//AppDispatch是什么？它是一个类型，是store.dispatch的类型，store.dispatch是一个函数，它的参数类型就是AppDispatch

slice.ts 创建reducer用来接受和处理数据

//Ducks pattern
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState {
    value: number;
}
const initialState: CounterState = {
    value:0
}
const counterSlice = createSlice({
    name:'counter',
    initialState,
    reducers:{
        incremented(state){
            //it's okay to do this because immer is used under the hood
            state.value++;
        },
        //state是immutable的，所以不能直接修改，只能返回一个新的state，action是一个对象，里面有payload属性，是从组件传过来的
        amountAdded(state,action:PayloadAction<number>){
            state.value += action.payload;
        }

    }
});
export const {incremented,amountAdded} = counterSlice.actions;
export default counterSlice.reducer;
//这个文件的作用？它是用来创建slice的，slice是redux的核心，它是一个对象，里面有很多属性，比如reducer，actions等
//counterSlice.reducer是什么？它是一个函数，它的参数是state和action，返回值是一个新的state

使用前的准备工作

import {TypedUseSelectorHook,useDispatch,useSelector} from "react-redux";
import type {RootState,AppDispatch} from "../store/store";

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
//文件的作用： 使用泛型封装了useDispatch和useSelector，使得在组件中使用时，不需要再写类型，因为类型已经被封装在了这个文件中

在组件中使用

import React, { Fragment } from "react";
import {useAppDispatch,useAppSelector} from '../../hooks'
import {incremented,amountAdded} from "../../features/counter/counterslice";
import {Button} from "antd";

interface LoadingPageProps {

}
const LoadingPage:React.FC<LoadingPageProps>=(props)=> {
  //从store中获取指定数据
   const value=useAppSelector(state=>state.counter.value)
    //获取dispatch，用于触发reducer的action
   const dispatch=useAppDispatch()
    return (
        <Fragment>
            <div className={'min-h-screen'}>
                <h1>count is{value}</h1>
                <Button onClick={()=>dispatch(incremented())}>increment</Button>
                <Button onClick={()=>dispatch(amountAdded(5))}>increment by 5</Button>
            </div>
        </Fragment>
    );
}
export default CountPage