Question

我是React和Redux的新手，我正在构建一个简单的SPA，我通过输入表单将项目添加到列表中。我初始化了状态，我有2个默认项目值，我正在成功添加项目，但是当我想删除reducer中的对象时，我无法访问state.projects，它说这是未定义的，我无法理解为什么。你能帮帮我吗？

这是我的减速机：

const projects = (state = 'ADD_PROJECT', action) => {
    switch (action.type) {
        case 'ADD_PROJECT':
            return [
            ...state,
            action.payload
        ]
        case 'REMOVE_PROJECT':
            console.log(state.projects);
            return Object.assign({}, state, {
                projects: [state.projects.filter(project => project.id !== action.payload.id)],
             })
        default:
            return state
} 
export default projects

这是行动

export const addProject = (project) => {
    return {
        type: 'ADD_PROJECT',
        payload: project
    }
}

export const removeProject = (id) => {
    return {
        type: 'REMOVE_PROJECT',
        payload: id
    }
}

这是我创建商店和初始状态的方式

const initialState = { 
    projects: [{
        id:100, 
        name:"Project 1"
    },{
        id:101,
        name:"Project 2"
    }] 
};

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

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

Answer 1

过滤项目时似乎有一个额外的括号。有效载荷也是id本身（id === action.payload）。请在REMOVE_PROJECT reducer：

中尝试此操作

projects: state.projects.filter(project => project.id !== action.payload)

Answer 2

在您添加项目后，如果不知道您的商店状态是什么，就很难知道发生了什么。

但是，似乎您没有将项目添加到州的正确部分。尝试将ADD_PROJECT案例的代码更改为：

case 'ADD_PROJECT':
  return [
    ...state.projects,
    action.payload
  ]

Answer 3

您的初始状态是带有项目ARRAY的OBJECT，但是当您ADD_PROJECT时，您将返回您所在州的ARRAY加上新项目。您必须返回相同的格式：

 case 'ADD_PROJECT':
            return {
            ...state,
            projects: [
               ...state.projects,
               action.payload
            ]                
        }

我无法访问React Redux应用程序中的状态对象

3 个答案: