This is first time i'm working with React and Redux. I haven't able to find error around it.
"webpack-internal:///./node_modules/react-error-overlay/lib/index.js:1446 Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers."
This is reducer:
import { combineReducers } from 'redux';
const rootReducer = combineReducers({});
export default rootReducer;
If the object is empty.
const rootReducer = combineReducers({});
This error will show.
add some data in it like:
import { combineReducers } from 'redux';
import foo from '../foo' //this is your reducer
const rootReducer = combineReducers({foo});
export default rootReducer;
reducer example
//reducer/foo.js
export default function foo(state = null, action) {
switch (action.type) {
case 'MY_ACTION_TYPE':
return action.payload
}
return state;
}
Related
am using React redux in react native but facing this error. i have followed many solutions but no one worked for me, hers is more detail about my actions and reduces and store
action.js
export const AddNow =()=>{
return "ADD_NUM"
}
export const DelNow =()=>{
return "DEL_NUM"
}
in reducer folder -> MyBook.js
const initialState = 30;
const MyBook = (state = initialState, action) => {
switch (action.type) {
case "ADD_NUM":
return initialState +1;
case "DEL_NUM":
return initialState -1;
}
return state;
};
export default MyBook
in redcures folder index.js
import MyBook from "./MyBook";
import {combineReducers} from 'redux';
const rootreducers=combineReducers({ cartIMyBooktems})
export default rootreducers;
in store ->index.js
import {createStore,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import rootreducers from '../reducers/index';
export default store = createStore(rootreducers, applyMiddleware(thunk));
in my app.js
import { AddNow , DelNow} from "../../actions";
import {useDispatch} from 'react-redux'
const dispatch = useDispatch();
<CustomBTN
onPress={()=>{dispatch(AddNow) }}
/>
i created this and followed one video tutorial but its not working for me but working for him. can anyone please help me? am beginner
The error says it all.
Your dispatch action is dispatching a string
export const AddNow =()=>{
return "ADD_NUM" //this action dispatches a string (returns a string)
}
this is causing "actual type was string"
It tells you, it is expecting a plain object. A plain object with a type property is also expected in your reducers
///
switch (action.type)
///
It is expecting a plain object with type property.
update your action.js to
action.js
export const AddNow =()=>{
return {
type: "ADD_NUM"
}
}
export const DelNow =()=> {
return {
type: "DEL_NUM"
}
}
now both your actions are returning plain objects, with a type property, as expected by redux dispatch and your reducers
also, since AddNow and DelNow are functions, they should be camelCase.
addNow, delNow
With regards to your book state always being 31.
in your reducers, you are always using the initial value as the modified value. The reducers recieve the current state as as the first parameter state which is defualted to initialState
update your reducers to use the state parameter
const initialState = 30;
const MyBook = (state = initialState, action) => {
switch (action.type) {
case "ADD_NUM":
return state +1; //update initialState to state
case "DEL_NUM":
return state -1; //update initialState to state
}
return state;
};
export default MyBook
store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers,
Here My store and root reducer file
import { createStore, applyMiddleware } from "redux";
import logger from "redux-logger";
import rootReducer from "./rootReducer";
const middlewares = [logger];
const store = createStore(rootReducer);
export default store;
This is the first time I'm working with React and Redux. I haven't been able to find error around it.
the above code is a total redux setup please help why this error coming:
import { combineReducers } from "redux";
import cardReducer from "../Services/profileimages/reducer";
export default combineReducers(cardReducer);
and my reducer file
import initialState from "./initialState";
import * as types from "./actionTypes";
const cardReducer = ({ state = initialState, action }) => {
switch (action.type) {
case types.FIREBASE_GETTING_IMAGES:
return {
cards: action.cards,
};
default:
return state;
}
};
export default cardReducer;
Haven't been able to find anything around here regarding this error:
import initialState from "./initialState";
import * as types from "./actionTypes";
const cardReducer = ({ state = initialState, action }) => {
switch (action.type) {
case types.FIREBASE_GETTING_IMAGES:
return {
cards: action.cards,
};
default:
return state;
}
};
export default cardReducer;
the above code is a total redux setup please help why this error coming
From the API doc combineReducers(reducers), the reducers parameter should be
An object whose values correspond to different reducing functions that need to be combined into one. See the notes below for some rules every passed reducer must follow.
Therefore, the correct usage is:
import { combineReducers } from 'redux';
import cardReducer from './cardReducer';
export default combineReducers({
card: cardReducer,
});
Besides, the cardReducer has the wrong signature. It should be:
const cardReducer = (state = initialState, action) {}
I got in my reactjs app this error:
Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers.
my store looks like this:
import {applyMiddleware, combineReducers, createStore} from "redux";
import thunk from "redux-thunk";
const store = createStore(
combineReducers({}),
applyMiddleware(thunk)
);
export default store;
how should it look like correctly?
You will get this error until you add a reducer to combineReducers see below example.
Counter reducer '/reducers/counter'
export default (state = 0, action) => {
switch (action.type) {
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
};
Store
import {applyMiddleware, combineReducers, createStore} from "redux";
import thunk from "redux-thunk";
import counter from '/reducers/counter';
const store = createStore(
combineReducers({counter}),
applyMiddleware(thunk)
);
export default store;
If you are not going to use reducer decomposition, then why are you using combineReducers? Simply define a function like the following to be your sole reducer and pass it to createStore().
(state = {}, action) => {
switch (action.type) {
default:
return state
}
}
Or simply the following if you just want it to work:
(state = {}, action) => state
When I look at a reducer being called via combineReducers, it's not getting the state or action in the arguments.
My reducers file is this:
import { combineReducers } from 'redux';
import nav from './reducers/nav';
import pages from './reducers/pages';
import entities from './reducers/entities';
export default function(initialData) {
return function(state, action) {
if (!state) {
console.log('no state', initialData);
return initialData;
}
// This is showing state as having expected value
console.log('state', state);
return combineReducers({
nav,
pages,
entities
});
}
};
My store initialization is like this:
import reducerWrapper from './reducers';
// Initial state is defined above
var reducers = reducerWrapper(initialState),
store = Redux.createStore(reducers, initialState);
The example code on the site doesn't use a wrapper (which I had seen in some other example). I tried that too and it didn't work. I mean in either example I'm not sure how it would get state/action given what is written out. I feel like I'm missing some magic here.
Updated
Here is the reducers file now:
import { combineReducers } from 'redux';
import nav from './reducers/nav';
import pages from './reducers/pages';
import entities from './reducers/entities';
export default combineReducers({
nav,
pages,
entities
});
followed by store = Redux.createStore(reducerWrapper, initialState), also doesn't work, even when I remove the wrapping inside reducerWrapper and just export default combineReducers`
The answer wasn't easily seen here. The problem is that my reducer did not have a default state.
The store triggers an INIT event here: https://github.com/reactjs/redux/blob/master/src/createStore.js#L204
It then eventually gets to here:
https://github.com/reactjs/redux/blob/master/src/combineReducers.js#L52
Meaning if my reducer is function (state, action) { return state } rather than function (state='anyDefaultValue') { return state }, combineReducer will error saying that the reducer did not return state
combineReducers returns a function that needs to be invoked with state and action. You can just export that directly:
const rootReducer = combineReducers(...);
export default rootReducer;
Or you can wrap it as you currently are:
const rootReducer = combineReducers(...);
export default function (initialData) {
return function (state, action) {
if (!state) {
console.log('no state', initialData);
return initialData;
}
// This is showing state as having expected value
console.log('state', state);
return rootReducer(state, action);
}
}
Haven't been able to find anything around here regarding this error:
"Store does not have a valid reducer. Make sure the argument passed to combineReducers is an object whose values are reducers."
My reducer
export default function FriendListReducer(state = {friends : []}, action) {
switch (action.type) {
case 'ADD_FRIEND':
return [
{ friends : action.payload.friend }, ...state.friends
]
default:
return state;
}
return state;
}
Combiner
import { combineReducers } from 'redux';
import { FriendListReducer } from './FriendListReducer';
const rootReducer = combineReducers({
friends: FriendListReducer
});
export default rootReducer;
My store config
import { applyMiddleware, createStore } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import rootReducer from '../reducers/reducers';
export default function configureStore(initialState = { friends: [] }) {
const logger = createLogger({
collapsed: true,
predicate: () =>
process.env.NODE_ENV === `development`, // eslint-disable-line no-unused-vars
});
const middleware = applyMiddleware(thunkMiddleware, logger);
const store = middleware(createStore)(rootReducer, initialState);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers/reducers', () => {
const nextRootReducer = require('../reducers/reducers').default;
store.replaceReducer(nextRootReducer);
});
}
return store;
}
Your import statement is incorrect. Either you use import { Foo } from 'bar' together with export Foo, or use import Foo from 'bar' if you export with export default Foo.
In other words, change either export default function FriendListReducer to export function FriendListReducer, or change the import statement from import { FriendListReducer } to import FriendListReducer.
If the object is empty.
export default combineReducers({
})
This error will show.
../reducers/reducers ? it's a strange naming
Anyway, it seems ../reducers/reducers doesn't return a reducer, if reducers is a directory, put a index.js inside, import each reducer and create a root reducer
import FriendListReducer from "./FriendListReducer"
const rootReducer = combineReducers({
friendList : FriendListReducer
})
export default rootReducer
Important!! you will have state.friendList in your state.
I hope it will help
store.js
FALSE
import { charactersSlice } from "./charactersSlice.js";
TRUE NOT USING {}
import charactersSlice from "./charactersSlice.js";
It looks like your top-level reducer function is using an array as its default value. Redux expects that the very top of your state will be an object, not an array. Try putting the array at a particular key in that object, like { friendList : [] }.
on above your codes
import { FriendListReducer } from './FriendListReducer';
const rootReducer = combineReducers({
friends: FriendListReducer
});
export default rootReducer;
instead of import { FriendListReducer } from './FriendListReducer';
just say import FriendListReducer from './FriendListReducer';
since FriendListReducer was exported with export default FriendListReducer and not export const FriendListReducer
Please check your combine reducer file It's empty......
you have forgot bind reducer here
import {combineReducers, createStore} from 'redux'
import listDataReducer from '../reducers/ListDataReducer'
const rootReducer = combineReducers({
listDataReducer, // Please add your reducer here
});
export default rootReducer;
I also faced the problem.
What I did was instead of:
combineReducers(productReducer, cartReducer)
I did:
combineReducers({ productReducer, cartReducer })
and it worked.
It expects a valid object for the store.