redux state prop get undefined

Question

i have small react redux application and the state i get in mapstatetoprops (work) is a array of data for a grid

const mapStateToProps = state => {
    console.dirxml(state);    
        return {
        work: state.work,
        loading: state.loading
        };
    
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

i fill the grid with the data (in work), after the next dispach (with different action in different component) "work" gets undefined

here is the reducer:

const initialState = {    
    Data: null,
    work: [],        
    input: []    
};

const rootReducer = (state = initialState, action) => {
    console.info(action.type);
    switch (action.type) {
        case 'FETCH_BEGIN':
            return {
                state,
                loading: true,
                error: null
            };        
        case Cons.INPUTDATA_CREATEJSON:
            return {
                state,
                inputData: action.payload.input,
                message: action.payload.message
            }
        case Cons.GETNAME:  
            state.Data = action.payload.item;
            return {
                state,
                loading: false,
                
            }
        case Cons.FETCHWORK: 
            return {
                state,
                loading: false,
                work: action.payload.items
            }
        case Cons.FETCH_ITEMS_SUCCESS:
            return {
                state,
                loading: false,
                items: action.payload.items
            }
                
        case Cons.FETCH_FAILURE:
            return {
                state,
                loading: false,
                error: action.payload.error,
                items: []
            };
        
        default:
            return state;
    }
};

i can see "work" data in deeper level of state in mapstatetoprops but it doesn't make any sense to get data from deeper level of state, so I think something is wrong with my reducer

In your reducer returns replace state with ...state so your state will be spread in the new object your passing. — CD..

Ajay Gaur Ajay Gaur · Accepted Answer · 2018-04-18T17:20:37

You should change your reducer as :

return {
    ...state,
    other state updation.
};

refer: Spread operator in JS

redux state prop get undefined

1 Answers