Redux使用connect时mapStateToProps返回组件状态而非store状态

排查方向1：检查Store与根Reducer的配置 #

你需要确认两个slice的reducer已经正确注册到全局store中，以Redux Toolkit的标准写法为例：

// store.js
import { configureStore } from '@reduxjs/toolkit'
import { playerSlice } from './playerSlice'
import { tracksSlice } from './tracksSlice'

export const store = configureStore({
  reducer: {
    // 这里的key就是全局state下的模块名
    player: playerSlice.reducer,
    tracks: tracksSlice.reducer
  }
})

注册完成后，全局state的结构为：

{
  player: { stateOne: "", stateTwo: "" },
  tracks: { stateThree: "" }
}

你需要通过state.player.stateOne、state.tracks.stateThree的方式取值，无法直接从state根级别获取对应属性。

排查方向2：检查应用根节点的Provider配置 #

Redux要求整个应用必须包裹在Provider组件内，且传入正确的store实例，入口文件写法参考：

// index.js
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { store } from './store'
import App from './App'

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

如果缺少Provider或store参数错误，connect函数无法获取到正确的全局状态。

排查方向3：检查组件的导入导出写法 #

如果你的组件代码同时导出了未连接的原始组件和connect包裹后的组件，注意不要导入错版本：

// Component.js 正确导出写法
class Test extends Component { /* 组件逻辑 */ }
// 只导出connect包裹后的组件
export default connect(state => {
  console.log(state)
  return {}
})(Test)

// 父组件导入时用默认导入，不要用命名导入
import Test from './Component'

排查方向4：检查connect的调用语法 #

connect的标准调用格式为connect(mapStateToProps, mapDispatchToProps)(原始组件)，不要颠倒参数顺序、多写或少写调用括号。

另外补充：正常情况下mapStateToProps的第一个参数永远是Redux全局状态，不可能拿到组件内部的this.state，你可以再核对打印的代码位置，确认是在mapStateToProps函数内打印的参数，而非组件实例方法中打印的this.state。同时你两个slice共用myReducers的写法也存在风险，不同slice的action重名时会触发意外的状态更新，建议分开定义各自的reducer逻辑。

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