Question

我正在使用react-redux webapp，直到现在，所有操作都与ajax请求相关，因此我使用的是redux thunk and 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只是console.log在每次调度之前和之后的整个状态。所以我知道在调度reducer函数之前，“任务”会在第一次调用后填充。

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

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;

任何人都可以帮助我吗？

由于

Answer 1

您没有展示如何组合减速器。但在我看来，你的一半reducer被编写为在表单tasks.list中获取子状态，但它只返回表单中的新状态。

如果使用combineReducers组合reducer，则每个组合的reducer只获得它的子部分（也就是它应该返回的部分）

Answer 2

尝试：

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切片，因此无需在此缩减器中包含.tasks。

这将导致状态树如：

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

如果您要删除list图层并且只有tasks列表，您可以将减速器更改为：

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_TASK似乎是一种奇怪的操作类型，用于将项目添加到list ...但不了解您的应用的更多信息，这可能仍然合适，所以如果是这样，请忽略它。< / p>

减速机中的状态为空

2 个答案: