I'm getting an error on createStore and I'm not understanding why.
import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunk from "redux-thunk"
import promise from "redux-promise-middleware"
import * as reducers from './reducers';
const middleware = applyMiddleware(promise(), thunk);
export default createStore(reducers, middleware);
Above is my code and I get the error in the line
const middleware = applyMiddleware(promise(), thunk);
The error is Expected the Reducer to be a function.
I'm using React Native 0.37 and the latest version of redux, redux-thunk and redux-promise-middleware.
The reducers is the result of combineReducers.
Thanks in advance.
import * as reducers from './reducers';
There's no way that reducers is a function. You're going to get an object with each export as a property. You probably want:
import reducers from './reducers';
Related
the index.js for reducers:
import { combineReducers } from "redux";
import authedUser from "./authedUser";
import users from "./users"
import tweets from './tweets';
export default combineReducers({
authedUser,
users,
tweets
})
the store:
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './components/App'
import {createStore,applyMiddleware} from 'redux'
import {createLogger} from 'redux-logger'
import {Provider} from 'react-redux'
import reducer from './reducers'
import middleware from './middleware'
import logger from 'redux-logger'
const store = createStore(
middleware,
reducer,
applyMiddleware(logger)
)
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('root'))
the action related to the error:
export const SET_AUTHED_USER = 'SET_AUTHED_USER'
export function setAuthedUser (id) {
return {
type: SET_AUTHED_USER,
id,
}
}
the reducer:
import { SET_AUTHED_USER } from '../actions/authedUser'
export default function authedUser (state = null, action) {
switch (action.type) {
case SET_AUTHED_USER :
return action.id
default :
return state
}
}
The previous state received by the reducer has unexpected type of "Function". Expected argument to be an object with the following keys: "authedUser", "users", "tweets"
Isn't this because you're passing args to createStore in the wrong order?
The first arg should be the reducer. The second arg is initial state. Since you're passing reducer as initial state, that's why you're seeing the error that previous state is type Function.
https://redux.js.org/api/createstore
I an using redux-thunk as a middleware and trying to connect to redux-firestore. When I run the application I am getting the error "TypeError: Object(...) is not a function" at createStore.
import reportWebVitals from './reportWebVitals';
import {createStore,applyMiddleware,compose} from 'redux';
import rootReducer from './store/reducers/rootReducer';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk'
import {reduxFirestore, getFirestore} from 'redux-firestore'
import {reactReduxFirebase, getFirebase} from 'react-redux-firebase'
import FBConfig from './Config/FBConfig'
const store = createStore(rootReducer,
compose(applyMiddleware(thunk.withExtraArgument({getFirestore,getFirebase})),
reduxFirestore(FBConfig),
reactReduxFirebase(FBConfig)
)
);
I am using the extra arguments in my thunk actions like this:
export const createProject=(project)=>{
return(dispatch,getState,{getFirebase,getFirestore})=>{
//asyn call to database
const firestore=getFirestore();
firestore.collection('projects').add({
...project,
authorFirstName:'Nam',
authorLastName:'Pam',
authorId:123,
createAt: new Date()
}).then(()=>{
dispatch({type:'CREATE_PROJECT',project});
}).catch((err)=>{
dispatch({type:'CREATE_PROJECT_ERROR',err})
})
}
};
The error that you are seeing is likely due to upgrading react-redux-firebase from v2 to v3 (or basing new code on outdated examples). This update introduced some breaking changes such as the removal of the reactReduxFirebase store enhancer function. The package now uses React contexts and introduced some new hooks such as useFirebase and useFirestore which allow you to access firebase through the context in function components. But that doesn't help with your thunk.
In the page on Redux Thunk Integration, they recommend passing the getFirebase function to the withExtraArgument.
thunk.withExtraArgument(getFirebase)
As far as accessing firestore, this GitHub discussion recommends accessing it through the getFirebase function.
getFirebase().firestore()
You want your extra argument to be an object with properties getFirebase and getFirestore. We use getFirebase as one property and create an inline arrow function for the getFirestore property.
import {createStore,applyMiddleware, AnyAction} from 'redux';
import thunk from 'redux-thunk';
import {getFirebase} from 'react-redux-firebase';
const store = createStore(
rootReducer,
applyMiddleware(
thunk.withExtraArgument({
getFirebase,
getFirestore: () => getFirebase().firestore(),
})
)
);
image of the ERROR
OK so I'm starting a new project and this is the first time that this has happened to me/ I keep getting an error stating ×
TypeError: middleware is not a function i checked dependencies and everything seems fine gone over my code nothing seems wrong please help
I tried deleting the modules and installing them again, I also checked on a passed application I've been doing and since I'm just starting out the code looks identical but that seems to work.
import { createStore, applyMiddleware } from "redux";
import promiseMiddleware from "redux-promise-middleware";
import userReducer from "./ducks/userReducer";
const middleware = applyMiddleware(promiseMiddleware());
const store = createStore(userReducer, middleware);
export default store;
import React, { Component } from "react";
import routes from "./routes";
import { Provider } from "react-redux";
import store from "./redux/store";
class App extends Component {
render() {
return (
<Provider store={store}>
<div className="App">{routes}</div>
</Provider>
);
}
}
export default App;
When you use the function applyMiddleware, the middlewares shouldn't be called as functions.
So instead of:
const middleware = applyMiddleware(promiseMiddleware());
do:
const middleware = applyMiddleware(promiseMiddleware);
See https://redux.js.org/api/applymiddleware#example-custom-logger-middleware for more details.
I want to add redux-logger on the middlewares chain. Below is my code:
import {createStore, combineReducers, applyMiddleware, compose} from 'redux';
import reducers from './index';
import createLogger from 'redux-logger';
import thunk from 'redux-thunk';
const logger = createLogger ({
log: 'info',
});
// create the global store
const store = compose (applyMiddleware (thunk, logger)) (createStore) (
reducers
);
export default store;
I will get below error with above code:
applyMiddleware.js:39 Uncaught TypeError: middleware is not a function
at applyMiddleware.js:39
at Array.map (<anonymous>)
at applyMiddleware.js:38
It works fine if I change the apply middleware to this line:
applyMiddleware (thunk, createLogger)
but I need to create the logger with some specific parameters. How can I add the created logger into middleware chain?
import { applyMiddleware, compose, createStore } from 'redux';
import reducers from './index';
import thunk from 'redux-thunk';
import { logger } from 'redux-logger';
const composeEnhancers = typeof window === 'object' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;
const middlewareList = [thunk, logger]
const enhancer = composeEnhancers(
applyMiddleware(...middlewareList)
);
const store = createStore(reducers, enhancer);
export default store;
It should working fine if you change your store into this:
const store = createStore(reducers, compose(applyMiddleware(thunk, logger)));
If that doesn't work, take a look into this issue. It should do the same as above code I think.
https://github.com/gaearon/redux-thunk/issues/35
Fixed this issue by changing the import to import {createLogger} from 'redux-logger';.
I use redux, react-redux, react-router, and react-router-redux, and redux-thunk.
import { createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux'
import { browserHistory } from 'react-router'
import { routerMiddleware } from 'react-router-redux'
import thunkMiddleware from 'redux-thunk'
...
const reduxRouterMiddleware = routerMiddleware( browserHistory )
const store = createStore(
mainReducer,
applyMiddleware(reduxRouterMiddleware, thunkMiddleware)
)
I was hoping as a result to be able to do thenable dispatch
dispatch(...).then()
but I get the message that then is not a function of dispatch.
How can I accomplish this?
the answer: it depends on what is returned by dispatch; if a promise is returned, then it will be thenable.