时间戳

首页 > 解决方案 > 我无法在我的 React Redux 应用程序中访问状态对象

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

问题描述

我是 React 和 Redux 的新手，我正在构建一个简单的 SPA，通过输入表单将项目添加到列表中。我初始化了状态，我有 2 个默认项目值并且我成功地添加了项目，但是当我想删除减速器中的一个对象时，我无法访问 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')
)

标签： reactjsreduxreact-redux

解决方案

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

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

推荐阅读