CODEWITHSUNDEEP
reactjstypescriptredux
ygmedia
ygmedia

Reputation: 3

State is undefined when using CombineReducers

I'm working on a React typescript project and trying to set up redux.

I have split my reducers in two at the moment and combining them using combineReducers.

Strangely when my application is run, state is undefined (I am logging this.props but nothing has a value.

I can see that the actions are being dispatched using redux-devtools, but it just doesn't work.

If I move my reducers the index file, all seems to work.

I can't get my head around it...

Please help!

I've literally tried everything! Been at this all day. As mentioned, not using combinedReducers makes this problem go away.

Reducer 1

const initState = []

const imageResults = (state = initState, action) => {
    switch (action.type) {
        case 'SEARCH_IMAGES' :
            return [...state, action.payload]
        default:
            return state;
    }
}

export default imageResults;

Reducer 2

const initState = {
    term: "initial term"
}

const client = (state = initState, action) => {
    console.log(action.payload)
    switch (action.type) {
        case 'UPDATE_TERM' :
        return {
            ...state,
            term: action.payload
        }
        default:
        return state;
    }
}

export default client;

combined reducer file

import {combineReducers} from 'redux';

import imageResults from './imageResults';
import client from './imageResults';

const reducer = combineReducers({
    imageResults: imageResults,
    client: client
})

export default reducer;

When the application loads, I expect {term: "initial term", searchImages: ƒ, updateTerm: ƒ}

instead, I get: {term: undefined, searchImages: ƒ, updateTerm: ƒ}

Also my state should look like this:

imageResults:{term: "initial term"}
client(pin): []

But instead it looks like this: imageResults:[] client:[]

Upvotes: 0

Views: 1160

Answers (2)

Roman Unt
Roman Unt

Reputation: 893

Maybe you got wrong import? 

import client from './client';

Upvotes: 2

loveJS
loveJS

Reputation: 52

The matter is in this piece of code:

import imageResults from './imageResults';
import client from './imageResults';

I believe the path to the client should be different

import client from './client';

Try to pass the valid filename, please

Upvotes: 0

Related Questions