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

i want to use redux to manage the state of my application i know it is very easy to do this with function based compoenents because we have the useDispatch and useSelector but in the case of class based component we have what after struggling a lot of research i manage to find this super demo project which explain how we can use the state management in the class based compoents but when i go to use that they have used this createStore import { createStore } from "redux"; which using i am getting error that createStore has been deprecated just see the error below line

@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

I visited that place link but probably i am lost please help show me that way i want to state management smoothly its ok if i write more code but i want to do it i am bound to use class based component because i am writing a test

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

Now i am able to do the global state but still wondering how we can read the data and show it in our UI i have tried useSelector in all possible ways can anyone suggest me how can i do that

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

Solution

Generally, you really should not start a class-based project in 2022. They are essentially a legacy feature of React - the ecosystem has moved on, new library have little to none support for them. You will find yourself in a deadlock, not being able to use any modern libraries if you continue with class components.

That said, also Redux has moved on. While it supports class components all the same as before (connect is the only part of react-redux that interacts with your classes and that has not changed), the way how Redux code itself is written has changed massively in the last few years and modern Redux code as a consequence is 1/4 of the code it used to be, with much more security against bugs.

But that also means that most old tutorials and example projects are completely outdated and should not be used for learning any more. The one you have there certainly is one of those, since it uses createStore which you should not be using any more since 2019 if you were following official recommendations.

Please take a step back and evaluate if you really want to use class components.

Apart from that, please follow the official Redux tutorial instead of trying to run random outdated boilerplates from the internet.