无法从组件获取 redux 状态

Question

简单的计数器应用程序。单击按钮时状态正在按预期变化，我可以在 redux 开发工具中进行跟踪。但是我无法从计数器组件访问 count redux 状态。我到底做错了什么？

import React,{useState} from 'react'
import { connect } from 'react-redux';
import  addone from '../actions/addone';



const Counter = ({addone,count}) => {
    
    console.log(count);
    return (
        <div>
            <h1>Value:{count}</h1>
            <button type="button" onClick={()=>addone()}>Add 1</button>

        </div>
    )
}


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

export default connect(mapStateToProps, { addone })(Counter);

输出值后不显示任何内容。

Answer 1

你需要在我编辑你的代码的功能组件中使用useSelector钩子：

import React,{useState} from 'react';
import { useSelector} from 'react-redux';
import  addone from '../actions/addone';

const Counter = () => {
    const count = useSelector((state) => state.count);
    console.log(count);
    return (
        <div>
            <h1>Value:{count}</h1>
            <button type="button" onClick={()=>addone()}>Add 1</button>

        </div>
    )
}