Preload state with async API call about breko-hub HOT 17 CLOSED

@tomatau thanks for the info! I think this thread should be closed for now and I'll do some research and studies.

from breko-hub.

Hey! Sorry I'm on a train right now so can't reply fully. You need to consider that the logic you've added is synchronous and the next line after your dispatch will render immediately - not waiting for the asynchronous dispatch to have completed. I'll help more later after work when back on my personal machine

from breko-hub.

@tomatau thank you for your help! and by the way, I'm trying to upgrade the webpack to v4 and I am hitting errors here and there. Is there any webpack v4 config file that I can refer to for this project?
Thanks once again!

from breko-hub.

Hey, re webpack 4 I'm waiting for their migration guide to be ready and hopefully the webpack plugins will all be up to date by then too. Right now they haven't updated their documentation so I'm not gonna spend too much time working with it until then

from breko-hub.

@tomatau ah noted. Well I guess I'll try to figure out myself until then 😄 . Anyway, is there any example for the preloaded state (the main issue)?

from breko-hub.

Can you share the apiFetch function so I can see what you're doing there?

You might be able to

            payload: ctx.history.location
        })
        // dispatch locale action and await for the promise returned by middleware
        await ctx.store.dispatch(apiFetch()).payload.promise

        let modules = []
        const __html = ReactDOMServer.renderToString(

Usually for this sort of thing, it's good to define the api fetch per route in the route config object or route components and then have the renderApp middleware run the actions and wait for them to finish.

In the past I used a different library that would save the promises for each api request into an array so that I could await for them all to complete in the renderApp middleware before the server render. It doesn't work with react-router since v3 though so you need to do some manually configuration with a router config object.

from breko-hub.

@tomatau thank you for the reply! here's what I have for the apiFetch (it's in locale.actions.js)

import { request } from 'app/utils'
import { API_FETCH } from './locale.constants'

export const apiFetch = () => ({
    type: API_FETCH,
    payload: {
        // TODO: change the endpoint later
        promise: request.fetch('/api/locale')
    }
})

by mentioning route config, are you referring to react-router-config? Sorry that I ask so many stuffs because I'm still a newbie here 🙇 . Thanks once again!

from breko-hub.

react-router-config is some abstraction for config management. I was talking about a BYO solution where it's more clear what's happening. The react-router official docs have good guides here: https://reacttraining.com/react-router/web/guides/server-rendering/data-loading

from breko-hub.

Is there any webpack v4 config file that I can refer to for this project?

@alamchrstn I've migrated this project to webpack 4 now

from breko-hub.

@tomatau wow thank you so much! I'll look into it 😄 you're awesome!

from breko-hub.

@tomatau I noticed that you replaced the babel-plugin-dynamic-import-webpack with babel-plugin-syntax-dynamic-import. Actually what's the real difference? Is it due to webpack 4's compatibility?

from breko-hub.

Long story!

It was incorrect for me to use the dynamic-import-webpack in the first place -- because we had { modules: false } in preset-env to let webpack take care of the modules. But the syntax plugin allows the other plugins to work with the syntax.

So really that change is an unrelated fix! It only came about when trying to update the dynamic-import-webpack dependency.

Bear in mind that we still need the dynamic-import-node for the server render support.

from breko-hub.

@tomatau ah I see... I guess I need to do some readings for the installed packages 😅 Thanks for your help so far man! And anyway, do you have any suggestion if I want to implement responsiveness for the React Components? You know, like rendering different component(s) based on screen sizes...

from breko-hub.

Hey man! For those sorts of questions, google and stack overflow will give you much better answers. There are github lists like "awesome react" which come with some ideas too. Sorry I'm not helping much with this as I'd prefer to keep conversations in this repo specific to this repo.

from breko-hub.

@tomatau alright cool! thanks for your help so far! I will be exploring the stuffs that are inside this repo and will get in touch with you if anything is blur in along the way. Sorry to bother you this much 🙇 I hope I can learn much and fast... Thanks once again man! You're awesome!

from breko-hub.

hey it's me again @tomatau , I have a question 🙇 . So now, I would like to also preload a state into my initial location object that is injected from server (the code is in render-app middleware of the server) so instead of this

ctx.store.dispatch({
      type: LOCATION_CHANGE,
      payload: ctx.history.location,
})

I would like to set an initial state of the location object as well, maybe like this?

ctx.store.dispatch({
      type: LOCATION_CHANGE,
      payload: {
          ...ctx.history.location,
          state: {
              some: "state"
          }
})

but it does not seem to work, resulting the initial state of the location object to be undefined still. If you could, please help me to understand how to make this happens 🙇 .
Thanks in advance man!

from breko-hub.

Why do you want to do this?

React router redux itself will overwrite the location state as soon as the page loads. When you connect up their middleware they dispatch a location change to init the location.

https://github.com/ReactTraining/react-router/blob/v4.2.2/packages/react-router-redux/modules/ConnectedRouter.js#L28

from breko-hub.