如何使用 Z1E35BCBA2DBA10897C7BD0805D451 在 CLASS 反应组件中获取 redux 存储或 redux 调度

Question

I know how to to dispatch and get store using functional component. There is a great documentation about it here

But what about class component? How to get store and fire dispatch using class component. There is nothing said about it.

Lets say I defined hooks.ts:

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

export const useAppDispatch = () => useDispatch<AppDispatch>()
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

And I need this functional component make as class:

import {useAppDispatch, useAppSelector} from "../../../hooks"
import { setRelease } from "./../store/factorySlice/factorySlice"
const X: React.FC = () => {
  const {selectedRelease} = useAppSelector(store => store.factory)
  const dispatch = useAppDispatch()

  return (
    <>
     {selectedRelease}
     <button onClick={() => dispatch(setRelease())}>Click</button>
    </>
  )
}

Answer 1

Redux Toolkit is our official recommended approach for writing Redux logic. It wraps around the Redux core , and contains packages and functions that we think are essential for building a Redux app

You can use it with class component by using react-redux 's connect API:

import { connect } from "react-redux";
import { setRelease } from "./../store/factorySlice/factorySlice"

class X extends React.Component {
  render() {
    return (
      <>
        {this.props.selectedRelease}
        <button onClick={() => this.props.dispatch(setRelease())}>Click</button>
      </>
    );
  }
}

const mapStateToProps = (state) => ({
  selectedRelease: state.factory.selectedRelease
});

export default connect(mapStateToProps)(X);

Answer 2

This was the first implementation. You would connect the class component to the store like

connect()(MyComponent)

Where Class is MyComponent