函数式组件中使用redux——@reduxjs/toolkit

最新推荐文章于 2024-07-09 17:33:55 发布

qq_40844651

最新推荐文章于 2024-07-09 17:33:55 发布

阅读量1.4k

点赞数 2

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_40844651/article/details/126624431

版权

本文介绍了如何在函数式组件中使用@reduxjs/toolkit进行状态管理。首先创建了一个名为Count的React组件，然后创建了store和reducer，并在Count组件中使用store.dispatch和useDispatch来处理状态更新。最后在index.js中配置了路由并完成页面渲染。

摘要由CSDN通过智能技术生成

关于redux是什么不再赘述，我直接说如何在函数时组件中使用@reduxjs/toolkit，在最新的版本中，createStore显示要被丢弃，使用createConfigure。

1.先创建react组件Count

按照我们正常的使用逻辑，redux是为react组件进行全局状态管理服务的，那么必须先知道这个react组件是干嘛的。

import React, { useRef ,useState} from 'react';
// 交给redux的状态就不用在组件中写了,count就不写，但它也可以有自己的状态
export default function Count(Props) {
    const [count,setCount] = useState(0);
    const selectNumber = useRef();
    // const [carname,setCarname] = useState("奔驰");
    const increment = () => {
       setCount(count+selectNumber.current.value*1)
    }
    const decrement = () => {
        setCount(count-selectNumber.current.value*1)
    }
    const incrementOdd = () => {
        
        if (count % 2 !== 0) {
            setCount(count+selectNumber.current.value*1)
        }

    }
    const asyncIncrement = () => {