Создать reducer + action. Не обновляется состояние

Question

Я хочу при dispatch добавить данные. То есть, так:

const obj = [
   {comment: 1},
   {comment: 2}
]
dispatch(addData(obj, 'test'));
//addData - наш action
//Добавиться в initialState он должен так:
{
   ...obj,
   type: 'test'
}

dataReducer:

const initialState = {}
 
const dataReducer = (state = initialState, action) => {
   switch (action.type) {
   case 'ADD_DATA':
      state.push({...action.payload.obj, type: action.payload.type})
      break;
     default:
       return state;
   }
};
 
export default dataReducer;

dataAction:

export const addData = (obj, type) => ({
   type: 'ADD_DATA',
   payload: {obj, type}
 });

Но у меня почему-то не получается. Тип не хочет добавляться (

Answer 1

Редюсер должен всегда возвращать текущее состояние. Так же, у вас начальное состояние должно быть массивом, а не объектом, если вы используете метод push

const initialState = [];

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_DATA':
      state.push({...action.payload.obj, type: action.payload.type});
      return state; // Возвращаем текущее значение
    default:
      return state;
  }
};

Либо так:

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_DATA':
      state.push({...action.payload.obj, type: action.payload.type});
      break;
    case 'DEL_DATA':
      // Чтото делаем со стейтом
      break;
    }
  return state;
};

И ваш push можно сократить:

state.push(action.payload)

Answer 2

Если редюсер меняет состояние, то он должен вернуть новый объект этого состояния. Это написано в официальной документации и любом более-менее адекватном учебнике по redux.

Так что ваш код должен быть примерно таким:

const dataReducer = (state = [], action) => {
   switch (action.type) {
     case 'ADD_DATA':
       return state.concat(Object.assign({}, action.payload.obj, { type: action.payload.type }));
     default:
       return state;
   }
};

или, если писать по модному:

const dataReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_DATA':
      state = [ ...state, { ...action.payload.obj, type: action.payload.type } ];
      break;
  }
  return state;
};

БЛОГ НА HUSL

Создать reducer + action. Не обновляется состояние

Ответы (2 шт):