无法从React Counter组件获取Redux的count状态该如何解决？

• 根reducer结构不匹配
  你在mapStateToProps中直接取state.count，如果你的根reducer是通过combineReducers组合的，比如将计数器reducer挂载到了counter命名空间下：

// 根reducer示例
import { combineReducers } from 'redux'
import counterReducer from './reducers/counter'

export default combineReducers({
  counter: counterReducer
})

此时count的实际取值路径为state.counter.count，修改mapStateToProps即可：

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

你可以先在mapStateToProps中打印完整state结构，确认字段路径是否和预期一致。

• reducer未设置初始状态
  如果你的计数器reducer没有给count设置初始值，首次渲染时count为undefined，页面就会显示为空。检查你的reducer代码，确保初始值配置正确：

// 正确的计数器reducer示例
const initialState = {
  count: 0
}
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_ONE':
      return { ...state, count: state.count + 1 }
    default:
      return state
  }
}

• Provider层级配置错误
  确保应用入口处已经用react-redux的Provider组件包裹了根组件，并且传入了正确的store实例，Counter组件必须是Provider的后代组件，否则connect无法拿到store数据：

// 入口文件index.js示例
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import store from './store'
import Counter from './components/Counter'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <Counter />
  </Provider>
)

• reducer返回字段不匹配
  确认你的reducer处理ADD_ONE逻辑时，返回的字段名是count，而非其他名称（比如number、value等），和mapStateToProps中取值的字段名保持一致。

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