我如何从Redux的数组中只删除一个元素？目前对我来说是行不通的

Question

我想做一个简单的算法来删除一个数组中的项目。它应该是动态的。

减少器。

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;

The action:

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>
            );
          })}

  )

这是页面数组的样子 This is how the pages array looks like:

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

现在它删除了数组中的所有项目 而不是只删除了一个项目

你能看出我做错了什么吗？

Answer 1

在deletePage动作中只传递要删除的页面的索引，而不是所有的页面。现在它删除了所有的页面，因为你把所有的页面都传入了".dynamicMenuActions "中。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;

--行动

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

组成部分

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});