I have my app (a boilterplate with few, my own features). It has a global store (build-in, came from the boilerplate), which looks like:
import { createStore, applyMiddleware, compose, combineReducers } from 'redux'; //combine reducers from redux form
import { fromJS } from 'immutable';
import { routerMiddleware } from 'react-router-redux';
import createSagaMiddleware from 'redux-saga';
import createReducer from './reducers';
import { reducer as reduxFormReducer } from 'redux-form'; //registration form
const sagaMiddleware = createSagaMiddleware();
export default function configureStore(initialState = {}, history) {
// Create the store with two middlewares
// 1. sagaMiddleware: Makes redux-sagas work
// 2. routerMiddleware: Syncs the location/URL path to the state
const middlewares = [
sagaMiddleware,
routerMiddleware(history),
];
const enhancers = [
applyMiddleware(...middlewares),
];
// If Redux DevTools Extension is installed use it, otherwise use Redux compose
/* eslint-disable no-underscore-dangle */
const composeEnhancers =
process.env.NODE_ENV !== 'production' &&
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ : compose;
/* eslint-enable */
const store = createStore(
createReducer(),
fromJS(initialState),
composeEnhancers(...enhancers)
);
// Extensions
store.runSaga = sagaMiddleware.run;
store.asyncReducers = {}; // Async reducer registry
// Make reducers hot reloadable, see http://mxs.is/googmo
/* istanbul ignore next */
if (module.hot) {
module.hot.accept('./reducers', () => {
import('./reducers').then((reducerModule) => {
const createReducers = reducerModule.default;
const nextReducers = createReducers(store.asyncReducers);
store.replaceReducer(nextReducers);
});
});
}
return store;
}
Few days ago I've implemented a redux-form (it works great), but unfortunately it has an own, local store, which is not compatibile with the global one and looks like:
import { createStore, combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';
const reducer = combineReducers({
form: reduxFormReducer
});
const store = (window.devToolsExtension
? window.devToolsExtension()(createStore)
: createStore)(reducer);
export default store;
As far as I know, the store has to be global - the first one is, but the second one (for redux form) isn't.
I would like to ask you
How to mix these two stores into a single, common, global one?
Thank you for any answers!
Edit: Redux form comes from: https://codesandbox.io/s/qx95rm7gG
React redux comes from: https://github.com/react-boilerplate/react-boilerplate
Edit2: Files hierarchy:
-app
--index.js
--store.js (first one, global)
--containers
---UserRegistration
----index.js
----store.js (the second one, local)
but unfortunately it has an own, local store, which is not compatibile with the global one and looks like
This is not correct. The redux-form reducer is a standard reducer like any other and just needs to be combined into your reducer (from import createReducer from './reducers';).
If you are already combining reducers in createReducer (I assume you are because of the store.asyncReducers in the hot reloading), then you just need to include the reduxFormReducer with form as the key, something like:
import { combineReducers } from 'redux';
import { reducer as reduxFormReducer } from 'redux-form';
import someReducer from './someReducer';
import someOtherReducer from './someOtherReducer';
export default function createReducer(asyncReducers = {}) {
return combineReducers({
form: reduxFormReducer,
someReducer,
someOtherReducer,
...asyncReducers
});
}
If you share ./reducers/index.js I can make this answer more specific.
Related
I still don't have much experience with Redux.
But I have a situation at work where we will have an application with several modules.
Each module will have its own store.
I'm not able to merge all these stores into one store and then create a general store for all the project.
Could you tell me how can i do this?
import { combineReducers, createStore } from "redux";
const rootReducer1 = combineReducers({
reducerA: reducerA,
reducerB: reducerB,
reducerC: reducerC
});
export const store1 = createStore(rootReducer1);
/*****/
import { combineReducers, createStore } from "redux";
const rootReducer2 = combineReducers({
reducerD: reducerD,
reducerE: reducerE,
reducerF: reducerF
});
export const store2 = createStore(rootReducer2);
/*****/
import { combineReducers, createStore } from "redux";
import store1 from "../modules/module1/reducers";
import store2 from "../modules/module2/reducers";
const rootReducer = combineReducers({
store1: store1,
store2: store2
});
export const store = createStore(rootReducer);
/*****/
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Provider as ReduxProvider } from "react-redux";
import { store } from "./store";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<ReduxProvider store={store}>
<App />
</ReduxProvider>
</StrictMode>,
rootElement
);
I created a test project in codesandbox.io just to demonstrate the idea of what the project will be like.
combineReducers(reducers) helper function turns an object whose values are different reducing functions into a single reducing function. It can't combine multiple stores.
Besides, the best practice is Only One Redux Store Per App
A standard Redux application should only have a single Redux store instance, which will be used by the whole application
You can have each module act as a first-level slice on the redux state tree like this:
store.js:
// module 1
const rootReducer1 = combineReducers({
reducerA: reducerA,
reducerB: reducerB,
reducerC: reducerC
});
// module 2
const rootReducer2 = combineReducers({
reducerD: reducerD,
reducerE: reducerE,
reducerF: reducerF
});
// App
const rootReducer = combineReducers({
module1: rootReducer1,
module2: rootReducer2
});
export const store = createStore(rootReducer);
The structure of the redux state tree will be like this:
{
module1: {
reducerA: {},
reducerB: {},
reducerC: {}
},
module2: {
reducerD: {},
reducerE: {},
reducerF: {}
},
}
If the module becomes large in the future, you can split it into a separate application with its own redux store.
I am getting this error
Uncaught TypeError: Providing your root Epic to
createEpicMiddleware(rootEpic) is no longer supported, instead use
epicMiddleware.run(rootEpic)
When simply using
import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import app from './app'
// Bundling Epics
const rootEpic = combineEpics(
)
// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware(rootEpic)
// Define Middleware
const middleware = [
thunk,
promise(),
epicMiddleware
]
// Define Reducers
const reducers = combineReducers({
form: formReducer
})
// Create Store
export default createStore(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(...middleware))
Kindly help to resolve this
First, take a look at this document: Official Redux-Observable Document because we're using the newest version of Redux-Observable, then reviewing its document is quite helpful.
After reviewing the document, let's see a small example project (Counter app):
This is the root.js file which contains my Epics and Reducers after bundling.
// This is a sample reducers and epics for a Counter app.
import { combineEpics } from 'redux-observable';
import { combineReducers } from 'redux';
import counter, {
setCounterEpic,
incrementEpic,
decrementEpic
} from './reducers/counter';
// bundling Epics
export const rootEpic = combineEpics(
setCounterEpic,
incrementEpic,
decrementEpic
);
// bundling Reducers
export const rootReducer = combineReducers({
counter
});
And this is store.js where I define my store before using it.
import { createStore, applyMiddleware } from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { rootEpic, rootReducer } from './root';
import { composeWithDevTools } from 'redux-devtools-extension';
const epicMiddleware = createEpicMiddleware();
const middlewares = [
epicMiddleware
]
const store = createStore(
rootReducer,
composeWithDevTools(applyMiddleware(middlewares))
);
epicMiddleware.run(rootEpic);
export default store;
In order to successfully implement redux-observable, we have to obey this order:
Creating epicMiddleware using createEpicMiddleware() method
Using the applyMiddleware() method to register the epicMiddleware (the redux-devtools-extension is optional)
Calling the epicMiddleware.run() with the rootEpic we created earlier.
This is the instruction from the Redux-Observable Document
For more information, you could find it here: : Setting Up The Middleware:
Try this
import 'rxjs'
import { createStore, combineReducers, applyMiddleware } from 'redux'
import { reducer as formReducer } from 'redux-form'
import thunk from 'redux-thunk'
import promise from 'redux-promise-middleware'
import { createEpicMiddleware, combineEpics } from 'redux-observable'
import app from './app'
// Bundling Epics
const rootEpic = combineEpics(
)
// Creating Bundled Epic
const epicMiddleware = createEpicMiddleware();
// Define Middleware
const middleware = [
thunk,
promise(),
epicMiddleware
]
// Define Reducers
const reducers = combineReducers({
form: formReducer
})
// Create Store
const store = createStore(reducers,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(...middleware))
epicMiddleware.run(rootEpic);
export default store
official documentation createEpicMiddleware.
Well, have you tried:
import { epicMiddleware, combineEpics } from 'redux-observable'
const epicMiddleware = epicMiddleware.run(rootEpic)
?
js like this
import {createStore, applyMiddleware, combineReducers} from 'redux'
import {composeWithDevTools} from 'redux-devtools-extension'
import withRedux from 'next-redux-wrapper'
import nextReduxSaga from 'next-redux-saga'
import createSagaMiddleware from 'redux-saga'
import {initialState} from './initialState'
import globalSaga from '../sagas/global'
const sagaMiddleware = createSagaMiddleware()
export function configureStore (reducers,initialState) {
console.log(initialState)
let states = {}
Object.keys(reducers).map((key) => {
states[key] = initialState[key]
})
console.log(reducers)
console.log(states)
const store = createStore(
combineReducers({reducers}),
states,
composeWithDevTools(applyMiddleware(sagaMiddleware))
)
store.sagaTask = sagaMiddleware.run(globalSaga)
return store
}
export function withReduxSaga (BaseComponent, reducers) {
return withRedux(configureStore(reducers,initialState))(nextReduxSaga(BaseComponent))
}
export default function configureWithReduxSaga(component,reducers){
return withReduxSaga(component,reducers)
}
and the error is
Store does not have a valid reducer. Make sure the argument passed to
makeStore is not a function
What might be wrong, basically I would like to write function that adds reducers and store.global with specific sagas into nextjs component without much code, best would be something like this:
configureWithReduxSaga(
{reducer1, reducer2},
{saga1, saga2}
)
is it possible? I can create root reducer and root saga and pass it to every component, that is not hard to code, but is it performant?
combineReducers({reducers}),
Most likely that you have dictionary of reducers, but provide them wrapped into redundant object. Use rest spread operator combineReducers({...reducers}) or simple object passing combineReducers(reducers) in that case. See original documentation for it: https://redux.js.org/docs/api/combineReducers.html#arguments
If reducers is array, you should iterate over it and give own name to each reducer.
Not sure why I'm getting the following errors.
I'm just setting up my store, actions and reducers, I haven't called dispatch on anything yet.
Expected
App runs fine, Redux state is not updated
Results
src/index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, compose } from 'redux'
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
import App from './App'
import css from './coinhover.scss'
const element = document.getElementById('coinhover');
const store = createStore(reducer, compose(
applyMiddleware(thunk),
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));
ReactDOM.render(
<Provider store={ store }>
<App />
</Provider>, element);
src/reducer/index.js
import { combineReducers } from 'redux'
import { coins } from './coins'
export default combineReducers({
coins
});
src/reducer/actions/coins.js
import * as api from '../../services/api'
import { storage, addToPortfolio } from '../../services/coinFactory'
export const ADD_COIN = 'ADD_COIN'
export function getCoin(coin) {
return dispatch => {
api.getCoin(coin)
.then((res_coin) => addToPortfolio(res_coin))
.then((portfolio) => dispatch(updatePortfolio(portfolio)));
}
}
export function updatePortfolio(portfolio) {
return {
type: ADD_COIN,
portfolio
}
}
finally src/reducer/coins/index.js
import { ADD_COIN } from './actions'
const initialState = [];
export default (state = initialState, action) => {
switch(action.type) {
case ADD_COIN:
return action.portfolio;
default:
return state;
}
}
Your issue lies with how you're importing your coins reducer:
import { coins } from './coins'
The latter tries to obtain a named export returned from the file in ./coins.
You are not using any named exports only export default, therefore you just need to import the file as follows:
import coins from './coins';
Using the latter will result with the fact that coins will then contain the value of export default; which will be the coins reducer.
Even when all your imports are correctly imported, this can still happen for one other reason. Circular Dependency!
In my case, this happeded because of a circular dependency in a file. I had two circular dependecy in the project that I created accedentally. Example: rootReducer.ts -> authSlice.ts -> rootReducer.ts.
These dependencies are often not as easy to debug. I used this package to check for circular dependencies. Once the circular dependency was removed, all was well.
Ah just found it, I was importing my coins reducer incorrectly...
import { combineReducers } from 'redux'
import coins from './coins' // because I have coins/index.js
export default combineReducers({
coins
});
instead of
import { coins } from './coins'
This was my fix:
import { combineReducers } from 'redux'
import { coins } from './coins'
export default combineReducers({
coinsState: coins || (() => null) // By adding this I resolved it.
});
If nothing worked for you this might be a circular dependency. I had a project like that requiring store state in the slice. Instead of using the store there was a thunk available that can provide you with the state without importing the store itself. If you have this edge case you can get state from thunk.
thunkAPI.getState()
In my case, I was not adding a default property to my reducers. When I added it, it worked.
here is my code;
const counterReducer = (state = 0, action) => {
switch(action.type){
case 'INCREMENT':
return state + 1;
case 'DECREMENT':
return state - 1;
default:
return state;
}
}
export default counterReducer;
and combinde file;
import counter from './counter';
import { combineReducers } from 'redux';
const allReducers = combineReducers({
counter: counter,
});
export default allReducers;
So I have a tree of modules, and two in particular that are behaving oddly. Using Babel 6 + Browserify (babelify).
Module #1 (WindowManager/index.js) exports a named function called reducer, as well as a default export.
import WindowManager from './component';
import { combineReducers } from 'redux';
import { connect } from 'react-redux';
import { reducer as search_palette } from './SearchPalette';
const initialState = {
// stuff
};
const window_manager = (state = initialState, action) => {
// stuff
return state;
};
export const reducer = combineReducers({window_manager, search_palette})
const mapStateToProps = (state) => {
return {
// stuff
};
};
export default connect(mapStateToProps)(WindowManager)
Module #2 (store.js) imports WindowManager/index.js's reducer function and tries to use it.
import { createStore, combineReducers } from 'redux';
import { reducer as WindowManagerReducer } from './WindowManager';
const initialState = {
// stuff
};
const FetchApplicationsReducer = (state = initialState, action) => {
// stuff
return state;
}
export default createStore(
combineReducers({
applications: FetchApplicationsReducer,
ui: WindowManagerReducer,
})
)
For some reason, store.js is getting executed before WindowManager/index.js and thus the exports are not available.
Anyone run into this?
After much tweaking, modifying the order of import statements fixed the issue. It's a complex tree, so hard to represent here in a way that doesn't involving dumping the whole project... but I think ultimately there may be a bug inside Babel's ES6 module system somewhere.