Я не могу получить доступ к объекту состояния в моем приложении React Redux - PullRequest
Новая
       6

Я не могу получить доступ к объекту состояния в моем приложении React Redux

0 голосов
/ 30 мая 2018

Я новичок в 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')
)

Ответы [ 3 ]

0 голосов
/ 30 мая 2018

Кажется, есть дополнительная скобка при фильтрации проектов.Также полезной нагрузкой является сама id (id === action.payload).Попробуйте это в REMOVE_PROJECT редукторе: 

projects: state.projects.filter(project => project.id !== action.payload)
0 голосов
/ 30 мая 2018

Ваше начальное состояние - ОБЪЕКТ с ARRAY проектов, но когда вы ADD_PROJECT, вы возвращаете ARRAY вашего состояния плюс новый проект.Вы должны вернуть тот же формат: 

 case 'ADD_PROJECT':
            return {
            ...state,
            projects: [
               ...state.projects,
               action.payload
            ]                
        }
0 голосов
/ 30 мая 2018

Немного сложно узнать, что происходит, не видя, в каком состоянии находится ваш магазин после добавления ваших проектов.

Однако, похоже, что вы не добавляете проекты в правильную частьштат.Попробуйте изменить код для случая ADD_PROJECT на это: 

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