I am trying to get a redux-form working but am getting a warning that says:
Unexpected property "form" found in previous state received by the reducer. Expected to find one of the known reducer property names instead: "route", "questionSet". Unexpected properties will be ignored.
When I console.log the props to see my form, form is undefined.
I believe the problem is in the configuration.
my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import 'babel-polyfill';
import './index.css';
import App from './containers/App/App';
import registerServiceWorker from './registerServiceWorker';
import { Provider } from 'react-redux';
import configureStore from './configureStore'
import createHistory from 'history/createBrowserHistory';
// import { configureStore } from "redux-inject-reducer-and-saga";
const initialState = {};
const history = createHistory();
const store = configureStore(initialState, createHistory);
ReactDOM.render( <Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
registerServiceWorker();
this is my storeConfig.js
import { createStore, applyMiddleware, compose } from 'redux';
import { fromJS } from 'immutable';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import createReducer from './rootReducer';
const sagaMiddleware = createSagaMiddleware();
export default function configureStore(initialState, history) {
const middlewares = [sagaMiddleware, routerMiddleware(history)];
const enhancers = [applyMiddleware(...middlewares)];
const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
shouldHotReload: false,
})
: compose;
const store = createStore(
createReducer(),
fromJS(initialState),
composeEnhancers(...enhancers),
);
store.runSaga = sagaMiddleware.run;
store.injectedReducers = {};
store.injectedSagas = {};
if (module.hot) {
module.hot.accept('./rootReducer', () => {
store.replaceReducer(createReducer(store.injectedReducers));
});
}
return store;
}
This is my RootReducer:
import { fromJS } from 'immutable';
import { combineReducers } from 'redux-immutable';
// import { routeReducer } from 'react-router-redux';
import {reducer as formReducer} from 'redux-form/immutable';
export default function createReducer(injectedReducers) {
console.log(formReducer, 'form')
return combineReducers({
// route: routeReducer,
...injectedReducers,
form: formReducer
});
}
Need more text to post (will replace): I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.I can also add the rootReducer in a minute.
Related
I am switching my redux-react app to gatsby app , I am facing this issue
and I cannot see the pages anymore.
I've tried to follow these instructions : https://github.com/gatsbyjs/gatsby/tree/master/examples/using-redux
yet I get this problem.
createStore.js :
import { createStore, applyMiddleware } from 'redux'
import logger from 'redux-logger'
import createSagaMiddle from 'redux-saga'
import rootSaga from './rootSaga'
import rootReducer from './rootReducer'
import thunk from 'redux-thunk';
const sagaMiddleware = createSagaMiddle()
export const middlewares = [thunk,sagaMiddleware,logger];
export const store = createStore(rootReducer, applyMiddleware(...middlewares))
sagaMiddleware.run(rootSaga)
export default store;
rootReducer.js:
import { combineReducers } from 'redux'
import userReducer from './User/user.reducer'
export default combineReducers({
user: userReducer
})
wrap-with-provider.js:
import * as React from 'react';
import { Provider } from 'react-redux';
import store from './src/state/createStore'
const wrapWithProvider = ({ element }) => (
<Provider store={store}>{element}</Provider>
);
export default wrapWithProvider
and gatsby-ssr.js / gatsby-browser.js:
import wrapWithProvider from "./wrap-with-provider"
export const wrapRootElement = wrapWithProvider
what probably could be the reason.
I removed brackets({}) in import and that fixed my problem. You can try this: import createStore from 'redux'
I am learning redux and wanted to know how can I save the state locally so when I refresh after making some changes to state it remains. I came to know about redux-persist and saw the github doc describing how to use it but its not very clear to me.
Here is the index.js code of my app -
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import App from './components/app';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware()(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<App />
</Provider>
, document.querySelector('#container'));
How can I achieve it ?
//In your createStore have this code
import { applyMiddleware, compose, createStore } from 'redux'
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../reducers';
import { persistReducer } from 'redux-persist'
import localForage from 'localforage';
const loggerMiddleware = createLogger();
export default (initialState = {}) => {
// ======================================================
// Middleware Configuration
// ======================================================
const middleware = [thunkMiddleware, loggerMiddleware]
// ======================================================
// Store Enhancers
// ======================================================
const enhancers = []
const __DEV__ = process.env.NODE_ENV !== 'production';
if (__DEV__) {
const devToolsExtension = window.devToolsExtension
if (typeof devToolsExtension === 'function') {
enhancers.push(devToolsExtension())
}
}
// ======================================================
// Store Instantiation and HMR Setup
// ======================================================
let config = {
key: 'root',
storage: localForage,
whitelist: ['user'],
debug: __DEV__
}
let configureReducer = persistReducer(config, rootReducer)
const store = createStore(
configureReducer,
initialState,
compose(
applyMiddleware(...middleware),
...enhancers
),
)
return store
}
// In your App.js or root app, do this in your componentDidMount
persistStore(
store,
undefined,
() => {
console.log('callback::')
}
)
Here is what you should do for creating your store, using redux-persist in store.js:
import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import localForage from 'localforage';
import { routerReducer } from 'react-router-redux';
import reducers from './container/reducers';
import middlewares from './middlewares';
const reducer = combineReducers({
...reducers,
routing: routerReducer,
});
export const initStore = (state) => {
const store = createStore(
reducer,
{},
compose(
applyMiddleware(...middlewares),
autoRehydrate(),
),
);
persistStore(store, {
storage: localForage,
whitelist: ['login'],
});
return store;
};
In your app.js, create your store this way:
import React from 'react';
import { Provider } from 'react-redux';
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';
import createRoutes from './routes'; // Contains the routes
import { initStore, persistReduxStore } from './store';
import { appExample } from './container/reducers';
const store = initStore(appExample);
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = { rehydrated: false };
}
componentWillMount() {
persistReduxStore(store)(() => this.setState({ rehydrated: true }));
}
render() {
const history = syncHistoryWithStore(browserHistory, store);
return (
<Provider store={store}>
{createRoutes(history)}
</Provider>
);
}
}
I'm trying to utilize the React router package in my React + Redux application, and doing so gives me the following errors:
Unexpected key "listings" found in previous state received by the reducer. Expected to find one of the known reducer keys instead: "routing". Unexpected keys will be ignored.
Uncaught TypeError: Cannot read property 'accounts' of undefined
ReactDOMComponentTree.js?1a2c:107Uncaught TypeError: Cannot read property '__reactInternalInstance$c5skqk6ty0f83o5hzvf0i19k9' of null
Here is my code:
initialState.js:
export default {
listings: {
status: '',
searchBy: '',
accounts: []
}
};
index.js (root reducer file):
import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
const rootReducer = combineReducers({
routing: routerReducer
});
export default rootReducer;
routes.js:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import App from './components/App';
export default (
<Route path="/" component={App}>
<IndexRoute component={App}/>
</Route>
);
configureStore.js:
import {createStore, compose, applyMiddleware} from 'redux';
import rootReducer from '../reducers';
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant';
import thunk from 'redux-thunk';
export default function configureStore(initialState) {
const store = createStore(rootReducer, initialState, compose(
// Add other middleware on this line...
applyMiddleware(reduxImmutableStateInvariant(), thunk),
window.devToolsExtension ? window.devToolsExtension() : f => f // add support for Redux dev tools
)
);
if (module.hot) {
// Enable Webpack hot module replacement for reducers
module.hot.accept('../reducers', () => {
const nextReducer = require('../reducers').default; // eslint-disable-line global-require
store.replaceReducer(nextReducer);
});
}
return store;
}
index.js (entry point for app):
import React from 'react';
import {render} from 'react-dom';
import { Provider } from 'react-redux';
import { Router, browserHistory } from 'react-router';
import routes from './routes';
import configureStore from './store/configureStore';
import initialState from './reducers/initialState';
import objectAssign from 'object-assign';
import mockTableData from './data/MockTableData';
import App from './components/App';
import { syncHistoryWithStore } from 'react-router-redux';
const listings = objectAssign({}, initialState.listings, {accounts: mockTableData});
const initial = objectAssign({}, initialState, {listings});
const store = configureStore(initial);
const history = syncHistoryWithStore(browserHistory, store);
render(
<Provider store={store}>
<Router history={history} routes={routes} />
</Provider>, document.getElementById('app')
);
Any ideas?
I'm trying to implement redux in my universal app, but I've some problems with redux.
I've this configureStore function:
import { createStore, applyMiddleware, compose } from 'redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger'
import rootReducer from '../reducers/index';
import { routerMiddleware } from 'react-router-redux';
export default function configureStore(history, initialState) {
const reduxRouterMiddleware = routerMiddleware(history);
let finalCreateStore;
if (__DEVELOPMENT__ && __CLIENT__ && __DEVTOOLS__) {
const { persistState } = require('redux-devtools');
const DevTools = require('../containers/DevTools/DevTools');
finalCreateStore = compose(
applyMiddleware(thunkMiddleware)(createStore),
window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)(createStore);
}
else {
finalCreateStore = applyMiddleware(thunkMiddleware)(createStore);
}
const store = finalCreateStore(rootReducer, initialState);
if (__DEVELOPMENT__ && module.hot) {
module.hot.accept(rootReducer, () => {
store.replaceReducer(rootReducer);
});
}
return store;
}
And then I've my rootReducer file that looks like this:
import { combineReducers } from 'redux';
import environment from './environment';
import general from './general';
import alert from './alert';
import user from './user';
import { routerReducer } from 'react-router-redux'
const rootReducer = combineReducers({
environment,
general,
alert,
user,
routing: routerReducer
});
export default rootReducer;
The problem is that I get this error: Expected the reducer to be a function.
I've googled and searched on StackOverflow(where there are some similar problems), but the answers doesn't works in my case.
So, what I'm doing wrong ? and why ?
Thanks.
try this:
finalCreateStore = compose(
// you write more than one createStore here
applyMiddleware(thunkMiddleware),
window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)(createStore);
Have you tried
import { combineReducers } from 'redux';
import environment from './environment';
import general from './general';
import alert from './alert';
import user from './user';
import { routerReducer } from 'react-router-redux'
export const rootReducer = combineReducers({
environment: environment,
general: general,
alert: alert,
user: user,
routing: routerReducer
});
export default rootReducer;
I tried to create a simple react-redux-ajax working example, following Reddit API tutorial, but I get this error:
Uncaught Error: Actions may not have an undefined "type" property. Have you misspelled a constant?
The error is thrown by:
dispatch(fetchProducts(this.props)); in App.jsx
index.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { compose, createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createDevTools, persistState} from 'redux-devtools';
import DevTools from './DevTools.jsx';
import App from './App.jsx';
import rootReducer from './reducers.js';
const loggerMiddleware = createLogger();
function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
DevTools.instrument(),
applyMiddleware(
thunkMiddleware,
loggerMiddleware
),
// Lets you write ?debug_session=<name> in address bar to persist debug sessions
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)
}
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementsByClassName('products')[0]);
You just forgot to compose your enhancers, the third argument to createStore must be a function so you need to compose all your enhancers to provide a unique enhancer :
index.jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { compose, createStore, applyMiddleware } from 'redux'
import { Provider } from 'react-redux';
import thunkMiddleware from 'redux-thunk';
import createLogger from 'redux-logger';
import { createDevTools, persistState} from 'redux-devtools';
import DevTools from './DevTools.jsx';
import App from './App.jsx';
import rootReducer from './reducers.js';
const loggerMiddleware = createLogger();
function configureStore(initialState) {
return createStore(
rootReducer,
initialState,
compose(
applyMiddleware(
thunkMiddleware,
loggerMiddleware
),
DevTools.instrument(),
persistState(window.location.href.match(/[?&]debug_session=([^&]+)\b/))
)
)
}
const store = configureStore();
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementsByClassName('products')[0]);
Redux DevTool doc