Redux add item in array, crud?

Question

[acorn]

Привет!
Есть action/reducer ,который загружает список продуктов из файла(пока замена бд). Список отображается в react.
Делаю действие add_product , не получается добавить в основной массив новый продукт. Что делаю не так? При проверки action в консоли $r.store.dispatch({...}) появляется данный продукт ,но в массиве его нет
Action

//load file
export function fetchProducts () {
    return dispatch => {
        dispatch({
            type: "FETCH_PRODUCTS",
            payload: sampleProducts
        })
    }
}
//add product
export function addProduct(product){
    return {
        type: ADD_PRODUCT,
         product
    };
}

Reducer

const initialState = {  products: [] };
export default function productReducer (state = initialState,action) {
    console.log(state,action);
    switch (action.type) {      
    case "FETCH_PRODUCTS":
            return{
                ...state,
                products: action.payload
            };
     //add
        case ADD_PRODUCT:
            return [
                ...state,
                {
                    product: action.product
                }
            ];
        default:
            return state;
    }
}

Comments

[Роман Александрович]

папробуйте так

//add
        case ADD_PRODUCT:
            return
 { ...state,
                    product: [...state.product, action.product]
                }

[acorn]

Роман Александрович, изменений не произошло

[Роман Александрович]

acorn, покажите в консоле данные

//add
        case ADD_PRODUCT:
       console.log(state,action.product)
            return
 { ...state,
                    product: [...state.product, action.product]
                }

[acorn]

Роман Александрович,

[acorn]

Роман Александрович, potato=>productReducer там начальный массив
из 3 продуктов

[acorn]

Роман Александрович,

//load file 
const initialState = {   products: [] };
export default function productReducer (state = initialState,action) {
    console.log('this state is changed');
    console.log(state,action);
    switch (action.type) {
        case "FETCH_PRODUCTS":
            return{
                ...state,
                products: action.products
            };
     //add
        case ADD_PRODUCT:
            return{
                ...state,
                products: [...state.products, action.product]
    };
        default:
            return state;
    }
}

[Роман Александрович]

acorn, тогда попробуйте сделать так

case ADD_PRODUCT:
       let products = state.products
      products.push(action.product)
            return
 { ...state.products,
                    products
                }

[acorn]

Роман Александрович, не хочет добавлять. Попробовал так, тоже не то. В чем же может быть причина?
Вообще действия у меня правильные?
1)Делаю action
1.1. Action добавляет все продукты из списка
1.2 Action добавляет к списку новые продукты

export function addProduct(product){
 console.log('dispatching add product');
    return {
        type: ADD_PRODUCT,
        product
    };
}

2) Пишу редьюсер
2.1. Reducer добавления все продуктов
2.2 Reducer добавление к state новых продуктов

case ADD_PRODUCT:
                return {
                    ...state,
                    products: state.products.concat(action.product)
};

[Роман Александрович]

acorn, ну так покажите редюсер после выполнения данного метода.

[acorn]

Роман Александрович, он не изменяется. Зеленым выделен reducer. Желтым action.

или что-то другое надо было прислать?

[Роман Александрович]

acorn, у вас prodacts это массив обьектов и вы в него пытаетесь засунуть ствоку. Папробуйте в редусере засунуть в в него обьект и посмотреть появится он в сторе или нет. (как вариант)

[Роман Александрович]

acorn, вот так папробуйте

case ADD_PRODUCT:
       console.log(state,action.product)
            return
 { ...state.prodacts,
                    products: [...state.product, {'id':9999,'title_fin':action.product}]
                }

и покажите что консоль покажет

Answer 1

[Ilya]

Почему при "FETCH PRODUCT" редьюсер возвращает объект а при добавлении массив? По сути "ADD_PRODUCT" должен работать чуть иначе:

case ADD_PRODUCT:
            return {
                ...state,
                {
                    products: [...state.products, action.product]
                }
            };

Comments

[acorn]

Илья,спасибо, подправил, но не добавляет

[Максим]

acorn, а должно работать. По такому коду, можно сказать что данные в reducer'e обновляются корректно. Значит вы либо их не правильно отрисовываете, либо в экшене передаете не то что надо.