将 redux 状态传递给 reducer

Question

我正在尝试通过单击从 dom 中删除一个元素。我在没有 redux thunk 的情况下没有问题，但现在我遇到了问题。我的减速器不知道状态。如何让他知道物品是什么？

行动：

export function deleteItem(index) {
    return {
        type: 'DELETE_ITEM',
        index
    };
}

我的减速器显示未定义。

export function deleteItem(state = [], action) {
    switch (action.type) {
        case 'DELETE_ITEM':
            const copy = state.items.slice()
            console.log(copy)
        default:
            return state;
    }
}

这是我的实际代码https://github.com/KamilStaszewski/flashcards/tree/develop/src

Answer 1

我看到了你的代码，你正在为你想要对你的项目完成的每个操作（ei itemsHaveError，deleteItem，...）定义一个新的减速器，但是这样做的正确方法是存储所有项目的相关函数到单个减速器，该减速器保存每当对项目发生某些操作时需要更改的数据，但是按照您的操作方式，任何时候发生任何操作，因为您的减速器是分开的，初始状态会像您一样为空传递给函数，reducer 不知道它们的相关数据，所以他们用空的初始状态覆盖它们，正确的方法是为项目编写单个 reducer：

    const initialState = {
      isLoading: false,
      hasError: false,
      items: [],
    };

    export default function(state = initialState, action) {
      switch (action.type) {
        case ITEMS_HAVE_ERROR:
          return {
            ...state,
            hasError: action.hasError,
          };
        case ITEMS_ARE_LOADING:
          return {
            ...state,
            isLoading: action.isLoading,
          };
        case ITEMS_FETCH_DATA_SUCCESS:
          return {
            ...state,
            items: action.items,
          };
        case DELETE_ITEM:
          const copy = state.items.slice()
          return {
            ...state,
            items: copy,
          };      
        default:
          return state;
      }
    }

所以这将是您的 item.js 和您的 item reducer，并且是唯一应该使用 combineReducer 函数的。

Answer 2

默认表示reducer的初始状态，状态是一个空数组，你不能访问state.items，因为它是未定义的。假设：

const x = [];
x.foo.slice();

这将返回一个错误。因此来自：

state = []

改成：

state = {
     items:[]
}

将其应用于您的代码：

export function deleteItem(   
state = {
     items:[]
}, 
action) {
    switch (action.type) {
        case 'DELETE_ITEM':
            const copy = state.items.slice()
            console.log(copy)
        default:
            return state;
    }
}