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

const initialState = { usersById: [] }

Значение выглядит так:

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

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

redux.js.org/recipes/structuringreducers/…
Alexander Staroselsky 26.10.2018 21:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
1
28
1

Ответы 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;
  }
};

Другие вопросы по теме