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

Question

我是 React 新手，正在尝试学习 Redux。我想访问类中的存储，但它给了我一个错误：我不能在类中使用钩子。

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

 function App() {
      const counter = useSelector(state => state.counter);
    
      return <div>{counter}</div>;
    }

但是当我想在课堂上执行此操作时，它给了我一个错误，即我不能在课堂上使用钩子。

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

Answer 1

正如@Ying Zuo所说，你的方法仅适用于功能组件。解决这个问题：

代替这一行：

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

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

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

那么对于调度你应该像这样使用它：

const mapDispatchToProps = () => ({ 
    increment, 
    decrement
});

最后你将这样的一切组合起来：

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

不要忘记从

increment

导入

decrement

和

action

，以及从

connect

模块导入

react-redux

。

Answer 2

useSelector

和

useDispatch

是 React Hook，仅适用于函数组件。

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

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 4

使用 HOC（高阶组件），对我来说这是在类组件中使用钩子的最简单方法

class MyComponent extends React.PureComponent {}

const MyHoc = () => {
   const counter = useSelector();
   return <MyComponent counter={counter} />
}