Redux状态存储与展示问题求助：projects返回undefined

你遇到的问题是由几个关键错误导致的，以下是具体修复方案：

1. Provider未正确传入Store #

你的index.js中，Provider组件没有传递store属性，Redux无法将状态注入到组件树中。

修复后的index.js：

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
import {configureStore} from '@reduxjs/toolkit'
import rootReducers from './features/rootReducers'
import { Provider } from 'react-redux'

const store = configureStore({
    reducer: rootReducers
})

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

2. ProjectSlice的initialState嵌套错误 #

你在定义projectSlice时，把initialState写成了{initState}，这会生成一个嵌套对象：{ initState: { value: [...] } }，导致state.project.value路径不存在。

修复后的projectReducers.jsx：

import { createSlice } from '@reduxjs/toolkit' // 补充缺失的createSlice导入

const initState = {
  value: [
    {id:1 , title:'Mario World', content:'Pariatur amet ullamco incididunt quis consectetur occaecat voluptate ad.'},
    {id:2 , title:'Mario World2', content:'Pariatur amet ullamco incididunt quis consectetur occaecat voluptate ad.'},
    {id:3 , title:'Mario World3', content:'Pariatur amet ullamco incididunt quis consectetur occaecat voluptate ad.'}
  ]
}

const projectSlice = createSlice({
  name: 'project',
  initialState: initState, // 直接使用initState，避免嵌套
  reducers: {
    list: (state, action) => {
      // 修正错误的map逻辑，直接重置为初始数组
      state.value = [...initState.value]
    },
    addList: (state, action) => {
      // 若为添加新项，建议用push；若为替换数组则保留原逻辑
      state.value.push(action.payload)
    }
  }
})

export const { list, addList } = projectSlice.actions
export default projectSlice.reducer

3. Dashboard组件补充props传递 #

你的Dashboard中，ProjectList组件没有接收projects props，即便Dashboard拿到数据，子组件也无法使用。

修复后的Dashboard.jsx：

import React, { Component } from 'react'
import Notifications from './Notifications'
import ProjectList from '../projects/ProjectList'
import {connect} from 'react-redux'

class Dashboard extends Component {
  render() {
    console.log(this.props.projects)
    return (
      <section className='w-full h-full flex justify-center'>
        <div className='grid gap-10 grid-cols-2'>
          <div className='grid p-4 grid-col-1 gap-4 bg-red-200'>
            <ProjectList projects={this.props.projects} />
          </div>
          <div className='bg-green-400 '><Notifications/></div>
        </div>
       </section>
    )
  }
}

const mapStateToProps =(state) => {
  return{
    projects: state.project.value
  }
}

export default connect(mapStateToProps)(Dashboard)

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