Reactjs 还原程序中的状态为空

我正在开发一个

react-redux webapp

，到目前为止，所有操作都与

ajax

请求相关，因此我使用的是

redux-thunk和axios

。 现在，我正在使用一个组件，该组件将从名为“任务”的对象创建一个列表。这应该是非常直接的：操作调用发送任务对象，减速器将其添加到“tasks”状态内的数组中

问题是，当调用reducer时，它总是重写tasks对象数组。在reducer调用开始时执行console.log时，我看到状态始终为空

代码如下：

import {DROP_TASK} from '../actions/types'

export default function (state = {}, action) {
    switch (action.type){
        case(DROP_TASK):

            console.log("state", state); // here is shows object{}

            console.log('tasks', state.tasks);

            if(state.tasks === undefined || state.tasks === null ) {

                return {...state, list: [action.payload]}
            }



            return {...state, list: [...state.tasks.list, action.payload]};
        default:
            return state
    }
}

在index.js的createStore中

我正在做：

const createStoreWithMiddleware = applyMiddleware(reduxThunk, logger)(createStore);

其中logger just console.log记录每次调度前后的整个状态。因此，我知道在分派reducer函数之前，“tasks”是在第一次调用之后填充的

以下是我如何组合减速器：

import { combineReducers } from 'redux';
import {reducer as form} from 'redux-form';
import {reducer as uiReducer} from 'redux-ui';
import authReducer from './auth_reducer';
import treeReducer from './tree_reducer';
import media_asset_list_reducers from './media_asset_list_reducers';
import tasks from './tasks';

const reducers = combineReducers({
    form: form,
    auth: authReducer,
    tree: treeReducer,
    media_asset_list: media_asset_list_reducers,
    tasks: tasks,
    ui: uiReducer
});


export default reducers;

有人能帮我吗

---

谢谢

您没有展示如何组合减速器。但在我看来，减速机的一半是为了在formtasks.list中获取子状态而编写的，但它在formjustlist中返回新状态

如果使用组合减速机组合减速机，则每个组合的减速机只会获得其状态子部分（这也是它应该返回的状态子部分）

尝试：

import {DROP_TASK} from '../actions/types'

export default function (state = {}, action) {
    switch (action.type){
        case(DROP_TASK):
            return {...state, list: [...state.list, action.payload]};
        default:
            return state
    }
}

您的reducer将收到状态的

state.tasks

片段，因此无需在此reducer中包含

.tasks

这将产生一个状态树，如：

{
  ... //other reducers
  tasks: {
    list: []
  }
}

如果您想删除

列表

层，只想让

任务

成为一个列表，您可以将缩减器更改为：

import {DROP_TASK} from '../actions/types'

export default function (state = [], action) {
    switch (action.type){
        case(DROP_TASK):
            return [...state, action.payload];
        default:
            return state
    }
}

---

另外，

DROP\u TASK

似乎是一种将项目添加到

列表中的奇怪操作类型。。。但是不知道更多关于你的应用程序的信息，这可能仍然是合适的，所以如果是的话就忽略它。
对不起，我刚刚添加了联合减速器部分。好的，如果（state.tasks==undefined | | | state.tasks==null）明显错误，这个减速器作为状态参数得到的是allready state.tasksI，但是：
谢谢你的反馈！声誉低于15的人所投的票将被记录，但不会改变公开显示的帖子分数；-）