I am trying to connect redux-state-sync for syncronize state in different tabs to my next-redux project. But I have a server error (TypeError: dispatch is not a function) in this line: initStateWithPrevTab(makeStore). So how can I fix this bug? I try to add initStateWithPrevTab(makeStore) as a const or inside arrow func, but it still doesn't work. It's my store.js file where I configure store:
const config = {};
const middlewares = [createStateSyncMiddleware(config)];
const rootReducer = combineReducers({
booking: reducer,
});
const makeStore = () =>
createStore(
withReduxStateSync(rootReducer),
undefined,
applyMiddleware([config])
);
initStateWithPrevTab(makeStore);
export const wrapper = createWrapper(makeStore, { debug: true });
Related
Say i have a store configured like so.
const buildStore = (formSettings) => {
// const isDevToolsRequired = process.env.NODE_ENV === 'development';
const sagaMiddleware = createSagaMiddleware();
const preloadedState = initialState(formSettings);
const store = configureStore({
reducer: rootReducer,
middleware: (getDefaultMiddleware) => [
...getDefaultMiddleware({
thunk: false, // We use redux-saga i.e. objects, not the default, thunk i.e. callbacks
serializableCheck: false, // redux toolkit issues
immutableCheck: false, // TODO remove this if we can - after the full move to redux toolkit
}),
sagaMiddleware,
],
preloadedState,
devTools: true, // TODO turn off dev tools for prod once up and running
});
sagaMiddleware.run(rootSaga);
return store;
};
How do i get the preloadedState into initialState of an immerSlice in a next.js application? getStaticProps is used to get build time formSettings from another service, then its passed to configureStore... but i need that value (or parts of it) as my initial for the slices...
My rootReducer looks like:
const rootReducer = combineReducers({
components,
legalStatement,
navigation,
optionalFormConfig,
paging,
formConfig,
submission,
submissionStatus,
});
Removing initialState from any of the slices causes a runtime error, but anything added to initialState does not show in redux state.... my interpretation is that the initialState in the slice is overwritten as i provide preloadedState... so why is the initialState in the slice a required field?
Warning: You have opted-out of Automatic Static Optimization due to
getInitialProps in pages/_app. This does not opt-out pages with
getStaticProps
I tried different options, but I can’t achieve static page generation, even if I take out the functionality I need from getInitialProps from_app, then wrapping it in withRedux, I still get it in the end. I tried with this - https://github.com/kirill-konshin/next-redux-wrapper - but could not get the result, I assume that this is because of the redux-saga and the whole application will use getInitialProps
/store.js
const ReduxStore = (initialState /*, options */) => {
const sagaMiddleware = createSagaMiddleware();
const middleware = [sagaMiddleware];
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(...middleware)
// other store enhancers if any
);
const store = createStore(
rootReducer,
initialState,
enhancer
);
store.runSaga = () => {
// Avoid running twice
if (store.saga) return;
store.saga = sagaMiddleware.run(saga);
};
store.stopSaga = async () => {
// Avoid running twice
if (!store.saga) return;
store.dispatch(END);
await store.saga.done;
store.saga = null;
// log('Stop Sagas');
};
store.execSagaTasks = async (ctx, tasks) => {
// run saga
await store.runSaga();
// dispatch saga tasks
tasks(store.dispatch);
// Stop running and wait for the tasks to be done
await store.stopSaga();
// Re-run on client side
if (!ctx.isServer) {
store.runSaga();
}
};
store.runSaga();
return store;
};
export default ReduxStore;
//_app.js
import { Provider } from 'react-redux';
import withRedux from 'next-redux-wrapper';
import App from 'next/app';
class MyApp extends App {
render() {
const {Component, pageProps, store} = this.props;
return <Provider store={store}>
<Component {...pageProps}/>
</Provider>;
}
}
export default withRedux(makeStore)(MyApp);
Has anyone experienced this or have any ideas? I will be grateful for any help
I'd managed to get some of my earlier functions state in devtools as below:
Reducers function in DevTools
But when I tried to query some of the events in my interactions, the functions state werent able to display it. Below are my codes and settings, basically the flow is interactions > actions > reducers
interaction code:
export const loadAllOrders = async (exchange, dispatch) => {
// Fetch cancelled orders with the "Cancel" event stream
const fromBlock = 0;
const toBlock = "latest";
const cancelFilter = exchange.filters.CancelOrder();
const cancelStream = await exchange.queryFilter(cancelFilter, fromBlock, toBlock);
console.log(cancelStream)
// Format cancelled orders
const cancelledOrders = cancelStream.map((event) => event.args);
// Add cancelled orders to the redux store
dispatch(cancelledOrdersLoaded(cancelledOrders));
}
from my actions:
export const cancelledOrdersLoaded = (cancelledOrders) => {
return {
type: 'CANCELLED_ORDERS_LOADED',
payload:cancelledOrders
}
}
from my reducers:
export const exchange = (state = initialState, action) => {
switch (action.type) {
case 'EXCHANGE_LOADED':
return { ...state, loaded:true, contract: action.payload }
case 'CANCELLED_ORDERS_LOADED':
return { ...state, cancelledOrders: action.payload }
default:
return state
}
my configureStore
// For redux dev tools
const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const store = createStore(
rootReducer,
compose(applyMiddleware(thunk),devTools)
)
Thanks in advance
I haven't worked with redux for quite some time now, but from a quick look at some of my older repos, it seems like you didn't set up your store correctly.
This is what I have there,
import { applyMiddleware, createStore, compose, combineReducers } from "redux"
import thunk from "redux-thunk"
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const rootReducer = combineReducers({
reducers...
})
export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)))
I try to connect a function that is not a component to mapStateToProps using React Redux connect().
The goal is to access redux state outside of the component.
But once i try to run the function connectedJob() nothing happens.
const mapStateToProps = state => {
return {
user: state.user
};
};
const job = ({user}) => console.log(user.id);
const connectedJob = connect(mapStateToProps)(job);
connectedJob(); //undefined
I'm trying to modularize my code as best as I can. If sharing my App.js on github or something, I don't want to have to keep deleting the id's, I'd rather just include it on a separate file and just .gitignore it.
For some reason, my app is just really not liking the way I'm doing it and I'm having a tough time working around it. Any idea what I'm doing wrong?
This is my App.js file:
import firebase from 'firebase';
import {
apiKey,
authDomain,
databaseURL,
storageBucket,
messagingSenderId
} from './constants/Keys';
class App extends Component {
constructor(props) {
super(props);
this._navContext = initNavigationContext();
}
componentWillMount() {
const config = {
apiKey,
authDomain,
databaseURL,
storageBucket,
messagingSenderId
};
firebase.initializeApp(config);
}
render() {
return (
<Provider store={Store}>
<NavigationProvider context={this._navContext}>
<StackNavigation navigatorUID="root" id="root" initialRoute={Router.getRoute('auth')} />
</NavigationProvider>
</Provider>
);
}
}
export default App;
I've omitted the other import statements for here.
Here is my Keys file:
const apiKey = '//////';
const authDomain = '//////';
const databaseURL = '//////';
const storageBucket = '//////';
const messagingSenderId = '//////';
const facebookAppID = '//////';
export default {
apiKey,
authDomain,
databaseURL,
storageBucket,
messagingSenderId,
facebookAppID
};
Any idea what I'm doing wrong here?
I think your problem is that you are trying to destructure the default export, and what ES6 modules do is use destructuring for named exports. If your imported values have all undefined, it is likely the case. You can do the following:
export const apiKey = '//////';
export const authDomain = '//////';
export const databaseURL = '//////';
export const storageBucket = '//////';
export const messagingSenderId = '//////';
export const facebookAppID = '//////';
And then it should work.