我如何管理我的项目的状态我想为此使用 redux 但是基于 class 的组件

Question

我想使用 redux 来管理我的应用程序的状态我知道使用基于函数的组件很容易做到这一点，因为我们有 useDispatch 和 useSelector 但在基于 class 的组件的情况下我们经过大量研究后，我设法找到了这个超级 demo 项目，它解释了我们如何在基于 class 的组件中使用状态管理，但是当我去使用它们时，他们已经使用了这个 createStore import { createStore } from "redux"; 我在使用时收到 createStore 已被弃用的错误，请查看行下方的错误

@deprecated
We recommend using the configureStore method of the @reduxjs/toolkit package, which replaces createStore.

Redux Toolkit is our recommended approach for writing Redux logic today, including store setup, reducers, data fetching, and more.

For more details, please read this Redux docs page: https://redux.js.org/introduction/why-rtk-is-redux-today

我去过那个地方link但可能我迷路了请帮我看看我想顺利地进行状态管理如果我写更多的代码就没问题但我想这样做我一定会使用class 基于组件因为我正在写一个测试

-----------------------------------------------------------------------------------------

现在我可以执行全局状态，但仍然想知道我们如何读取数据并将其显示在我们的 UI 我已经尝试过所有可能的 useSelector 谁能建议我该怎么做

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { increment,decrement } from '../features/counterSlice'
import { useSelector } from 'react-redux'
export class ClassTest extends Component {
    constructor(props){
        super(props)
        console.log("the props are",this.props)
    }

    increase(){
        this.props.increment();
        console.log("Hello")
    }
    decrease(){
        this.props.decrement();
        console.log("Hello")
    }

    componentDidMount(){
        const count = this.props.useSelector()
        console.log(count)
    }
  render() {
    return (
      <div>
          <button onClick={()=>{this.increase()}}>Increase Me</button>
          <button onClick={()=>{this.decrease()}}>Increase Me</button>
      </div>
    )
  }
}

export default connect(null,{increment,decrement,useSelector}) (ClassTest);

Answer 1

一般来说，你真的不应该在 2022 年开始一个 class-based 项目。它们本质上是 React 的遗留特性——生态系统已经发展，新库几乎没有 none 支持它们.如果继续使用 class 个组件，您会发现自己陷入僵局，无法使用任何现代库。

话虽如此，Redux 也在向前发展。虽然它与以前一样支持 class 组件（connect 是 react-redux 中唯一与您的 classes 交互并且没有改变的部分），但如何编写的 Redux 代码本身在过去几年发生了巨大变化，因此现代 Redux 代码是过去代码的 1/4，并且对错误的安全性更高。

但这也意味着大多数旧教程和示例项目已经完全过时，不应再用于学习。您拥有的肯定是其中之一，因为它使用 createStore 如果您遵循官方建议，自 2019 年以来您不应该再使用它。

请退后一步，评估一下您是否真的想要使用class个组件。

除此之外，请遵循 official Redux tutorial 而不是尝试运行从互联网上随机获取过时的样板文件。

我如何管理我的项目的状态我想为此使用 redux 但是基于 class 的组件

how can i manage the sate of my project i want to use redux for that but on class based compoennts

reactjs

redux

react-redux

redux-toolkit

我如何管理我的项目的状态 我想为此使用 redux 但是基于 class 的组件

how can i manage the sate of my project i want to use redux for that but on class based compoennts

reactjs

redux

react-redux

redux-toolkit

我如何管理我的项目的状态我想为此使用 redux 但是基于 class 的组件