State is empty in reducer - reactjs

Question

I working on a react-redux webapp and until now, all action were related to ajax requests, so I'm using redux thunk and axios.
Now, I'm working in a component that would create a list from objects called 'tasks'. This should be very straight forward: the action calls send the task object and the reducer add it in an array inside the 'tasks' state.
The issue is that when called the reducer always rewrite the the tasks object array. Doing a console.log at the beginning of the reducer call I see the state is always empty.
Here is the code:
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
}
}
at the createStore at the index.js
I'm doing:
const createStoreWithMiddleware = applyMiddleware(reduxThunk, logger)(createStore);
where logger just console.log the whole state before and after every dispatch. So I know that before the dispatch for the reducer function, the "tasks" is populated after a first call.
Here is how I'm combining reducers:
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;
Can anyone help me?
Thanks

Answer 1

You arenot showing how are you combining reducers. But it seems to me that half of your reducer is written to get substate in form tasks.list, but it returns new state in form just list.
If you compose reducers with combineReducers, each of the combined reducers gets just its subpart of state (and that is what it should return as well)

Answer 2

Try:
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
}
}
Your reducer will receive the state.tasks slice of the state already, so there is no need to include .tasks in this reducer.
This will result in a state tree like:
{
... //other reducers
tasks: {
list: []
}
}
If you want to remove the list layer and just have tasks be a list you can change the reducer to:
import {DROP_TASK} from '../actions/types'
export default function (state = [], action) {
switch (action.type){
case(DROP_TASK):
return [...state, action.payload];
default:
return state
}
}
Also, DROP_TASK seems like an odd action type for adding an item to list... but not knowing more about your app, this may still be appropriate, so ignore this if so.