Как мне удалить только один элемент из массива из Redux? У меня сейчас не работает

Question

Я пытаюсь создать простой алгоритм для удаления элемента из массива. Это должно быть динамическое c.

Редуктор:

import { LOAD_PAGES, REMOVE_PAGE } from "./dynamicMenuActions";

export const initialState = { pages: [] };

export const dynamicMenuReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOAD_PAGES:
      return {
        ...state,
        pages: [...state.pages, action.pages]
      };
    case REMOVE_PAGE:
      return {
        ...state,
        pages: [...state.pages.filter((p, i) => p.dataIndex !== action.pages[i].dataIndex)]
      };
    default:
      return state;
  }
};

export default dynamicMenuReducer;

Действие:

export const removePageAction = (pages) => ({
  pages,
  type: REMOVE_PAGE
});

Итак, в компоненте я называю это так:

  const deletePage = () => {
    const pagesCopy = [...props.pages];

    removePageAction(pagesCopy);
  };

  return (
        {!!props.pages.length &&
          props.pages.map((p, index) => {
            const inputValue = get(inputsValue, `${p.pageType + index}`, "") || p.name;
            return (
              <Nav.Item key={index}>
                {editing.isSet && p.dataIndex === editing.data ? (
                  <>
                    <input
                      value={inputValue}
                      name={p.pageType + index}
                      onChange={handleInputsChange}
                    />
                    <Button onClick={() => toggleEdit(p.pageType + index, false)}>
                      Edit
                    </Button>
                  </>
                ) : (
                  <>
                    <Button size="sm" variant="link" onClick={() => deletePage()}>
                      X
                    </Button>
                  </>
                )}
              </Nav.Item>
            );
          })}

  )

Так выглядит массив страниц:

pages: [{
  name: "page name",
  editable: true,
  pageType: "page type",
  dataIndex: "dataIndex"
}]

Сейчас он удаляет все элементы в массиве, а не только один.

Вы видите, что Я делаю не так?

Answer 1

Передайте в действии deletePage только индекс удаляемой страницы, а не все страницы. Прямо сейчас он удаляет все страницы, потому что вы передаете все страницы в removePageAction

import { LOAD_PAGES, REMOVE_PAGE } from "./dynamicMenuActions";

export const initialState = { pages: [] };

export const dynamicMenuReducer = (state = initialState, action) => {
  switch (action.type) {
    case LOAD_PAGES:
      return {
        ...state,
        pages: [...state.pages, action.pages]
      };
    case REMOVE_PAGE:
      return {
        ...state,
        pages: [...state.pages.slice(0, action.index), ...state.pages.slice(action.index + 1)]
      };
    default:
      return state;
  }
};

export default dynamicMenuReducer;

- Action

export const removePageAction = (index) => ({
  index,
  type: REMOVE_PAGE
});

Component

const deletePage = (index) => {

    removePageAction(index);
  };

  return (
        {!!pages.length &&
          pages.map((p, index) => {
            const inputValue = get(inputsValue, `${p.pageType + index}`, "") || p.name;
            return (
              <Nav.Item key={index}>
                {editing.isSet && p.dataIndex === editing.data ? (
                  <>
                    <input
                      value={inputValue}
                      name={p.pageType + index}
                      onChange={handleInputsChange}
                    />
                    <Button onClick={() => toggleEdit(p.pageType + index, false)}>
                      Edit
                    </Button>
                  </>
                ) : (
                  <>
                    <Button size="sm" variant="link" onClick={() => deletePage(index)}>
                      X
                    </Button>
                  </>
                )}
              </Nav.Item>
            );
          })}

  )

Answer 2

Измените свое действие, чтобы можно было применить фильтр.

export const removePageAction = index => ({index, type: REMOVE_PAGE});