Reactjs 将redux状态传递给reducer

Reactjs 将redux状态传递给reducer,reactjs,redux,redux-thunk,Reactjs,Redux,Redux Thunk,我试图通过单击一个元素从dom中删除它。没有redux thunk,我做的没有问题,但现在我有问题了。我不知道这个州的情况。你如何让他知道这些物品是什么 行动: export function deleteItem(index) { return { type: 'DELETE_ITEM', index }; } 我的减速机显示未定义 export function deleteItem(state = [], action) { swi

我试图通过单击一个元素从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;
    }
}

这是我的实际代码,默认情况下指示减速器的初始状态,该状态为空数组,您无法访问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;
    }
}

我看到了您的代码,您正在为要对项目执行的每个操作定义一个新的减速机(例如itemsHaveError,deleteItem,…),但正确的方法是将项目的所有相关函数存储到一个减速机中,该减速机保存在项目发生某些操作时需要更改的数据,但按照您的操作方式,任何时候由于还原程序被分离而发生任何操作时,初始状态都会变为空,因为您已将其传递给函数,而还原程序不知道其相关数据,因此它们会用空的初始状态覆盖它们,正确的方法是这样为项编写单个还原程序:

    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函数的文件。

是否触发了deleteItem?我认为问题不在上面列出的代码上。已触发操作。它正在通过索引。问题在于reducer和他不知道应用程序的实际状态(state.items),为什么要将其从
store
本身删除?您可以将其从组件状态中删除。为什么要从
存储中删除
?正确的方法是什么?@Abinthaha:如果这些项应该从存储中使用,那么它们不应该也从存储中删除吗?items数组中填充了带有componentdidmount的api数据,我想访问此阵列保存整个阵列的减速器也应连接到操纵阵列本身的减速器。如果它没有连接,那么你需要将整个数组传递给函数。我知道出了什么问题,但我不知道如何修复它。如何将填充了api数据的项传递到该reducers状态?是否尝试记录该状态?尝试console.log(state)并查看内部情况,现在我有一个错误:没有为键“reducer”存储提供的reducer没有有效的reducer。确保传递给combineReducers的参数是一个值为reducers的对象“Reducer”是传递给combineReducers的main Reducer,有什么问题吗?谢谢你的回复。我能在更改后看到你的reducer文件和index.js吗?作为猜测,我认为从index.js导入reducer就像从“./items”导入{items}一样,但是在上面的代码中,我使用了导出默认函数,所以你应该像这样导入它:从“./items”导入项目不像{items}