I'm trying to register a redux store with ReactOnRails. I'm getting a console error of Uncaught TypeError: storeGenerator is not a function in clientStartup.js. The relevant lines of that file are
function initializeStore(el, railsContext) {
var name = el.getAttribute('data-store-name');
var props = JSON.parse(el.getAttribute('data-props'));
var storeGenerator = ReactOnRails.getStoreGenerator(name);
var store = storeGenerator(props, railsContext);
ReactOnRails.setStore(name, store);
}
Here's my store.js:
````
import ReactOnRails from 'react-on-rails';
import { combineReducers, compose, createStore, applyMiddleware } from 'redux';
import { reduxReactRouter, routerStateReducer } from 'redux-router';
import { createHistory } from 'history';
import thunk from 'redux-thunk';
import { apiMiddleware } from 'redux-api-middleware';
import { loadingBarMiddleware, loadingBarReducer } from 'react-redux-loading-bar'
import requisitions from 'reducers/requisitions/requisitions';
import routes from 'routes/routes';
const reducer = combineReducers({
router: routerStateReducer,
requisitions,
});
const store = compose(
applyMiddleware(thunk,
apiMiddleware,
loadingBarMiddleware({
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
})),
reduxReactRouter({
routes,
loadingBar: loadingBarReducer,
createHistory,
})
)(createStore)(reducer);
ReactOnRails.registerStore({ 'appStore': store });
const getStore = () => ReactOnRails.getStore('appStore');
export default getStore;
````
My controller:
````
before_action :setup_redux_store
def setup_redux_store
redux_store('appStore', props: {})
end
````
At the bottom of the layout slim file
= redux_store_hydration_data
A sample component using the store
````
import React from 'react';
import { Provider } from 'react-redux';
import LoadingBar from 'react-redux-loading-bar';
import getStore from 'store';
const LoadingBarProvided = () => (
);
export default LoadingBarProvided;
````
And my entry point:
````
import 'babel-polyfill';
import ReactOnRails from 'react-on-rails';
import LoadingBar from 'containers/LoadingBar/LoadingBar';
require('es6-promise').polyfill();
ReactOnRails.register({ LoadingBar });
````
Any idea what could be causing this error?
If it helps, storeGenerator is an object:
Object {transitionManager: Object, history: Object}
Nvm, needed to change store file to look like this
import ReactOnRails from 'react-on-rails';
import { combineReducers, compose, createStore, applyMiddleware } from 'redux';
import { reduxReactRouter, routerStateReducer } from 'redux-router';
import { createHistory } from 'history';
import thunk from 'redux-thunk';
import { apiMiddleware } from 'redux-api-middleware';
import { loadingBarMiddleware, loadingBarReducer } from 'react-redux-loading-bar'
import requisitions from 'reducers/requisitions/requisitions';
import routes from 'routes/routes';
const reducer = combineReducers({
router: routerStateReducer,
loadingBar: loadingBarReducer,
requisitions,
});
const reactOnRailsStore = (props, railsContext) => {
props.railsContext = railsContext;
return compose(
applyMiddleware(thunk,
apiMiddleware,
loadingBarMiddleware({
promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAILURE'],
})),
reduxReactRouter({
routes,
createHistory,
})
)(createStore)(reducer, props);
};
ReactOnRails.registerStore({ appStore: reactOnRailsStore });
const getStore = () => ReactOnRails.getStore('appStore');
export default getStore;
In case anybody had the same problem, the gist of it is: ReactOnRails.registerStore() expects the value in the passed object to be a function that returns a store, not the store itself.
Most helpful comment
In case anybody had the same problem, the gist of it is:
ReactOnRails.registerStore()expects the value in the passed object to be a function that returns a store, not the store itself.