如何将Redux Toolkit与导出实例的JavaScript类组件连接？

1. 修正错误的组件导出逻辑 #

React 类组件由框架内部负责实例化，你当前的export let class = new Class()写法不符合规范，且class是JS关键字不能作为变量名，调整为以下写法：

// 错误写法，禁止使用
// export let myComponent = new MyComponent()

// 正确写法：直接导出组件类
class MyComponent extends React.Component {
  // 组件业务逻辑
  render() {
    return <div>组件内容</div>
  }
}

2. 使用connect高阶组件绑定RTK状态 #

Redux Toolkit 完全兼容传统 Redux 的connect API，按以下步骤绑定即可：

步骤1：导入依赖 #

import { connect } from 'react-redux'
// 导入你自己用RTK创建的slice导出的actions
import { updateUser, incrementCount } from './modules/userSlice'

步骤2：定义状态映射函数 #

将RTK store中你需要用到的状态映射到组件props：

const mapStateToProps = (state) => {
  return {
    // 字段名可自定义，state后的属性对应你configureStore时注册的slice名称
    userInfo: state.user.userInfo,
    count: state.counter.count
  }
}

步骤3：定义触发方法映射 #

将slice的action映射到组件props：

const mapDispatchToProps = {
  updateUser,
  incrementCount
}

步骤4：包裹组件导出 #

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent)

之后你在组件内就可以直接通过this.props访问状态、调用更新方法：

class MyComponent extends React.Component {
  handleClick = () => {
    this.props.incrementCount()
  }
  render() {
    return <div onClick={this.handleClick}>{this.props.count}</div>
  }
}

额外说明：普通JS类对接RTK的方法 #

如果你提到的类不是React组件，是普通工具类，你可以直接导入RTK创建的store实例操作：

// store.js 导出你创建的store实例
import { configureStore } from '@reduxjs/toolkit'
import userReducer from './modules/userSlice'
export const store = configureStore({
  reducer: {
    user: userReducer
  }
})

// 普通JS类中使用
import { store } from './store'
import { updateUser } from './modules/userSlice'
class CommonUtils {
  modifyUser() {
    // 读取状态
    const user = store.getState().user.userInfo
    // 触发更新
    store.dispatch(updateUser({name: 'test'}))
  }
}
// 这种场景下你可以直接导出实例
export const commonUtils = new CommonUtils()

注意事项 #

• 确保应用根节点已经用<Provider store={store}>包裹，store为你用RTK创建的实例
• React组件禁止手动实例化导出，必须交由React渲染时实例化

内容的提问来源于stack exchange，提问作者dev_dy