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

我看到了您的代码，并且您正在为要对项目完成的每个操作（例如itemsHaveError，deleteItem等）定义一个新的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

默认指示化简器的初始状态，该状态为空数组，并且您无法访问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;
    }
}

将redux状态传递给减速器

2 个答案: