Comments (8)
Do you see expected data in props directly?
const res = await store.dispatch(getMovies(isServer));
// do console.log(res) here
return res.data;
It seems that your action is breaking the promise chain somewhere, e.g. getInitialProps
returns value and the page is rendered before the action is dispatched. You can also add console.log
before you dispatch constants.GET_MOVIES
.
Hope this helps. If not — create a repo where I will be able to reproduce the behavior, I will take a look.
P.S. Also chain may become broken because of Redux Thunk, so try this:
static async getInitialProps ({ store, isServer}) {
const res = await getMovies(isServer)(store.dispatch);
return res.data;
}
from next-redux-wrapper.
Yes I do, above where you commented and I also tried before dispatching the reducer, the props are also available in the normal react life cycles which confuses me cause it seems like everything else works. I almost feel like its getting overridden somehow.
The change for redux didn't work either.
Put a repo up here, thanks for taking a look
https://github.com/JeSuis/next-redux-test
from next-redux-wrapper.
What's the purpose of passing isServer around?
Also, when getInitialProps is called on the server and the component rendered using the store, how is the store rehydrated on the client with the same data? Does this library handle that?
e.g. http://redux.js.org/docs/recipes/ServerRendering.html
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
What if I'm using a custom _document.js
?
These are all general questions that might help to answer the issue, but are in truth mostly for me. My guess is that the state isn't being rehydrated on the client because of something above, but I don't have enough understanding.
Edit: Interesting, I see the initialState inside __NEXT_DATA__
on the client. I'm not quite sure how this all works together! Anywho, I'm probably wrong 👍
from next-redux-wrapper.
I ended up not needing isServer, I've since removed it locally.
I was under the impression this is where it would get hydrated, but I could be wrong.
And the wrapper should be taking care of most things according to the docs.
export default withRedux(initStore, (state) => ({foo: state.foo}), mapDispatchToProps)(Movies)
I am using _document.js
but I'm not making any data calls there, its just for css setup, I know there's race conditions using it with data calls.
I have since noticed something. I caused an error and the script halted and the store was populated.
So this leads me to think its getting overridden and the action type is undefined so the default condition gets chose, but for the life of me I can't see what would be causing it to get trigged more than once.
from next-redux-wrapper.
I can't get a redux-thunk example working myself.
Here is my code (TITLES_REQUEST
is never logged):
import React from 'react';
import fetch from 'isomorphic-unfetch';
import dynamic from 'next/dynamic';
import withRedux from 'next-redux-wrapper';
import makeStore from 'state/makeStore';
import Layout from 'components/Layout';
const Home = dynamic(import('../components/Home'));
const getTitles = () => dispatch => {
console.log('TITLES_REQUEST');
try {
return fetch('https://api.tvmaze.com/search/shows?q=batman')
.then(res => res.json())
.then(data => {
const shows = data.map(item => item.show);
dispatch({ type: 'TITLES_SUCCESS', titles: shows });
});
} catch (e) {
return dispatch({ type: 'TITLES_ERROR', titles: [] });
}
};
class HomePage extends React.Component {
static async getInitialProps({ store }) {
store.dispatch({ type: 'PLUS' });
return store.dispatch(getTitles);
}
render() {
return (
<Layout>
<Home {...this.props} />
</Layout>
);
}
}
export default withRedux(makeStore)(HomePage);
from next-redux-wrapper.
So it looks like according to this I'm trying to hydrate the store client side correctly, I even tried it in createStore
directly but have the same results where it has the default initial state as if something is overwriting it.
reduxjs/redux#1189
Note you can also get the server populated state from __NEXT_DATA.props.initialState
So I'm not sure if its this library or what causing the problem, the code I put together is pretty minimal.
@mherodev if you have a repo I can install from for your issue I can see if I have time this weekend to take a look.
from next-redux-wrapper.
Found my problem, initialState
was always getting set to just that.
Instead should have been using state
with initialState
as a fallback, didn't even have to change any other areas, the library seems to be taking care of it all.
Thanks for the help and the library.
from next-redux-wrapper.
Whoops, I wasn't calling my action creator, that's why! We're good ❤️
from next-redux-wrapper.
Related Issues (20)
- Meaning of the hydrating flag in the new version HOT 3
- Next 13 with next-redux-wrapper HOT 13
- Possible documentation bug.
- Internal Hooks are broken with Next 13 and React 18 HOT 4
- Two initialState passed to client when using _app.tsx + getServerSideProps HOT 1
- NextRouter was not mounted when using next-redux-wrapper HOT 7
- impact on performance when store rerenders on every request. HOT 1
- State value reset between page transitions in Next.js with Redux Toolkit and Next Redux Wrapper HOT 1
- parameter 'context' is empty for makeStore function
- Redux Toolkit example is unclear
- Breaking change from `[email protected]`: Error: `builder.addCase` cannot be called with an empty action type
- Redux Selector does not update when slice data is updated HOT 2
- GSSP ajax-mode -- HYDRATE-action not dispatching
- Types issue with 8.0.1 version of Next Redux Wrapper and Nextjs 13.4.19
- Strange Hydration action
- Typescript error when using object as parameter for makeStore function
- Wrapper doesn't support Next 14 HOT 4
- state getting empty before navigating to another SSR page.
- /!\ You are using legacy implementation. Please update your code: use createWrapper() and wrapper.useWrappedStore(). HOT 1
- wrapper.useWrappedStore(rest) not working when set NODE_ENV=test in nextjs-v14
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-redux-wrapper.