Question

我是新手，正在尝试学习redux。现在我想在一个类中访问商店。但这给了我一个我不能在课堂上使用钩子的错误。

当我在函数中使用此代码时（如我在YouTube教程中所看到的）它可以正常工作；在这里，我可以进入商店的柜台。

 function App() {
      const counter = useSelector(state => state.counter);

      return <div>{counter}</div>;
    }

但是当我想在课堂上这样做时，出现了一个错误，我不能在课堂上使用钩子。

那么我该如何访问类组件中的useSelector或useDispatch？

Answer 1

class App extends Component {
    constructor(props){
        super(props)
        this.state = {
            reduxState : {}
        }
    }
    DummyView = () => {
        const reducer = useSelector(state => state.reducer)
        useEffect(() => {
            this.setState({
                reduxState : reducer
            })
        }, [])
        return null
    }
    render(){
        return(
            <this.DummyView/>
        )
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

useSelector和useDispatch是React Hooks，仅在功能组件中起作用。

https://reactjs.org/docs/hooks-overview.html#but-what-is-a-hook

使用React Hooks，大多数组件可以并且应该用功能组件编写。如果必须编写基于类的组件，则可以使用react-redux中的connect。

https://blog.logrocket.com/react-redux-connect-when-and-how-to-use-it-f2a1edab2013/

Answer 3

正如@Ying Zuo所说，您的方法仅适用于功能组件。

用于解决此特定问题：

代替此行：

const counter = useSelector(state => state.counter);

您可以这样定义计数器状态：

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

然后用于调度，您应该像这样使用它：

const mapDispatchToProps = () => {
  return {
    increment, decrement

  };
};

最后，您将以下所有内容组合在一起：

export default connect(
  mapStateToProps,
  mapDispatchToProps()
)(App);

不要忘记从您的action导入“ {{increment，decrement}”，并从react-redux模块导入“ connect”

有关更多信息，很好的youtube视频对此进行了很好的解释（我认为）：

https://www.youtube.com/watch?v=9d020AQCtcU

我如何在类组件中使用react-redux useSelector？

3 个答案: