CODEWITHSUNDEEP
javascriptreactjsreact-nativereduxreact-redux
four-eyes
four-eyes

Reputation: 12384

Store does not have a valid Reducer

I can't get my head around it

actions.js

export const UPDATE = "UPDATE";

utils.js

export default function createReducer(initialState, handlers) {
    return function reducer(state = initialState, action) {
        if (handlers.hasOwnProperty(action.type)) {
            return handlers[action.type](state, action)
        } else {
            return state
        }
    }
}

reducer.js

import createReducer from "../../lib/utils.js";
import * as actions from "./actions.js";

export const filter = createReducer({}, {

});

combinedReducers.js

import { 
    combineReducers
} from "redux";
import filter from "../container/filter/reducer.js";

export default combineReducers(Object.assign(
    filter,
));

And thats where I try to hook up the store.

index.android.js

import React, { Component } from "react";
import {
  AppRegistry,
} from "react-native";
import { 
  Provider 
} from "react-redux";
import { 
  createStore, 
  applyMiddleware, 
  compose,
} from "redux";
import {
  createLogger,
} from "redux-logger";
import reducer from "./src/lib/reducers.js";
import thunkMiddleware from "redux-thunk";
import App from "./src/config/App.js"

const loggerMiddleware = createLogger({ predicate: (getState, action) => __DEV__});

function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(
      thunkMiddleware,
      loggerMiddleware,
    ),
  );
  return createStore(reducer, initialState, enhancer);
}

const store = configureStore({});

const HelloWorld = () => {
  <Provider store={store}>
    <App/>
  </Provider>
}
AppRegistry.registerComponent("...", () => HelloWorld);

And I always get:

Store does not have a valid reducer Make sure the argument passed to combineReducers is an object whose values are reducers.

What am I doing wrong here? I assume its the createReducer() function?!

Upvotes: 0

Views: 5321

Answers (3)

Jalissa
Jalissa

Reputation: 876

The problem is here:

export default combineReducers(Object.assign(
    filter,
));

filter returns a function and Object.assign is returning that function, and combineReducers expects an object which every key is a reducer.

So your code should be like this:

export default combineReducers(Object.assign({ filter } ));

or

export default combineReducers({ filter });

Upvotes: 1

artSir
artSir

Reputation: 550

Here is an example of my reducer broken down

//reducers/index.js
import { combineReducers } from 'redux';
import MyReducer from "./MyReducer";

const rootReducer = combineReducers({    
myProp: MyReducer
});

export default rootReducer;


//reducer/MyReducer.js
export default function MyReducer (state = null, action) {
     switch (action.type) {
         case 'MY_ACTION_TYPE':
           return action.payload
     }
     return state;
 }

Upvotes: 0

JulienD
JulienD

Reputation: 7293

There seems to be a typo in

export default combineReducers(Object.assign, {
    filter,
});

because Object.assign has no arguments.

Upvotes: 0

Related Questions