有没有办法使用 react-redux (useDispatch) 使用基于 class 的组件进行反应？ 我在渲染 function 中使用 useDispatch

Question

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Answer 1

Hooks are intended to be used in Functional components only. As per the Rules of hooks they can be called from

• React function components.
• Custom Hooks

In order to other question

Is there a way to use react-redux (useDispatch) in react using class based components?

Yes, there are ways of using react-redux inside class based components. Using connect API provided by react-redux library which will inject the action creators into the class component. Eventually accessing the required dispatch function by this.props . You can have a look here for a basic example of how it can be used.

Hope this helps.

Answer 2

You cannot use hooks with class components. As written in the docs , you need to create a container/wrapper component that passes the actions.

For that you have to use connect from 'react-redux' like this:

import { connect } from 'react-redux'

const mapDispatchToProps = dispatch => {
  return {
    onTodoClick: id => {
      dispatch(toggleTodo(id))
    }
  }
}

const VisibleTodoList = connect(mapStateToProps (HERE NOT NEEDED; IF YOU WANT TO DISPATCH ONLY), mapDispatchToProps)(TodoList)

export default VisibleTodoList

This would pass onTodoClick to your component via props which you can just call like any prop: this.props.onTodoClick()