React Redux项目中无法访问state.projects问题求助

你遇到的问题核心是reducer的初始状态设置错误，并且处理逻辑和你的应用state结构不匹配，导致在REMOVE_PROJECT时无法访问state.projects。

问题根源分析 #

1. 初始状态不匹配：你的reducer把初始state设成了字符串'ADD_PROJECT'，但你的应用初始状态是一个包含projects数组的对象。当Redux初始化时，reducer的错误初始状态会导致后续state变成字符串类型，自然没有projects属性。
2. action处理逻辑错误：
   • 在ADD_PROJECT分支，你直接返回[...state, action.payload]，但如果state是对象，这样会破坏state结构；
   • 在REMOVE_PROJECT分支，你试图访问state.projects，但此时state是字符串，所以得到undefined。

方案1：修正根reducer（直接处理整个应用state） #

把reducer改为负责整个应用的state，初始状态与你定义的initialState一致，同时调整action处理逻辑：

const projectApp = (state = { 
  projects: [{ id:100, name:"Project 1" },{ id:101, name:"Project 2" }] 
}, action) => {
  switch (action.type) {
    case 'ADD_PROJECT':
      // 返回新的state对象，更新projects数组
      return {
        ...state,
        projects: [...state.projects, action.payload]
      }
    case 'REMOVE_PROJECT':
      console.log(state.projects); // 现在可正常访问
      // 过滤删除目标项目，返回新state
      return {
        ...state,
        projects: state.projects.filter(project => project.id !== action.payload)
      }
    default:
      return state
  }
}

export default projectApp

调整store创建

因为reducer已包含初始状态，无需再传initialState（传也可覆盖）：

let store = createStore(projectApp, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

方案2：使用子reducer（Redux最佳实践） #

将projects数组的逻辑拆分到单独子reducer，用combineReducers组合，结构更清晰：

子reducer（仅处理projects数组）

// projectsReducer.js
const projectsReducer = (state = [{ id:100, name:"Project 1" },{ id:101, name:"Project 2" }], action) => {
  switch (action.type) {
    case 'ADD_PROJECT':
      return [...state, action.payload]
    case 'REMOVE_PROJECT':
      return state.filter(project => project.id !== action.payload)
    default:
      return state
  }
}

export default projectsReducer

根reducer

// rootReducer.js
import { combineReducers } from 'redux';
import projectsReducer from './projectsReducer';

const rootReducer = combineReducers({
  projects: projectsReducer
});

export default rootReducer;

创建store

import rootReducer from './rootReducer';

let store = createStore(rootReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

额外提醒 #

Redux reducer必须是纯函数，每次更新都要返回新的状态对象/数组，不能直接修改原state。你原来ADD_PROJECT中使用扩展运算符的方式是正确的，只需确保state结构匹配即可。

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