Как добавить / удалить элемент из моего избыточного состояния

Question

const initialState = {usersById: []}

Значение выглядит следующим образом:

{
  "123" : { id : "123", name: "john", age: 234 },
  "234" : { id : "234", name: "smith", age: 343 }
}

Как мне написать редуктор для добавления и удаления элемента?

Answer 1

Предполагая, что у вас есть бэкэнд API с БД ...

Вот действия:

export const CREATE_USER = 'CREATE_USER';

// Create
export function createUser(values, callback) {
  const request = axios
    .post(`${ROOT_URL}/users`, values)
    .then(() => callback());
  return {
    type: CREATE_USER,
    payload: request,
  };
}

// Delete
export const DELETE_USER = 'DELETE_USER';

export function deleteUser(id, callback) {
  const request = axios
    .delete(`${ROOT_URL}/users/${id}`)
    .then(() => callback());
  return {
    type: DELETE_USER,
    payload: id,
  };
}

// Get all users
export const FETCH_USERS = 'FETCH_USERS';

export function fetchUsers() {
  const request = axios.get(`${ROOT_URL}/users`);

  return {
    type: FETCH_USERS,
    payload: request,
  };
}

// Get one user by id
export const FETCH_USER = 'FETCH_USER';

export function fetchUser(id) {
  const request = axios.get(`${ROOT_URL}/users/${id}`);
  return {
    type: FETCH_USER,
    payload: request,
  };
}

Вот редуктор:

import _ from 'lodash';
import { FETCH_USERS, FETCH_USER, DELETE_USER } from '../actions/index';

export default (state = {}, action) => {
  switch (action.type) {
    case DELETE_USER:
      return _.omit(state, action.payload);
    case FETCH_USER:
      return { ...state, [action.payload.data.id]: action.payload.data };
    case FETCH_USERS:
      return _.mapKeys(action.payload.data, 'id');
    default:
      return state;
  }
};