How to implement Redux?

[rhzs]

Hi guys, any idea how to implement Redux? where can I find example Redux + React Server?

[hzhu]

Here's a basic example, a reimplementation of the Redux counter app in react-server:
https://github.com/hzhu/react-server-redux-basic

All you need is redux and react-redux. Setting it up is similar to plain Redux. Now how you structure a react-server, Redux application is up to you.

[gigabo]

Whoa! @hzhu that's awesome!

We should link to that example from our docs. Leaving this open as a reminder.

[doug-wade]

@hzhu @gigabo what about pulling it into react-server-examples?

[hzhu]

Yeah I was planning on that! How about I submit a PR for review in a day or two?

[gigabo]

Even better! Thanks @hzhu!

[rhzs]

@hzhu thanks a lot!!

[hzhu]

@incubus8 I realized that the Counter example isn't too useful once one introduces data fetching & user interaction. Here's a better use case with react-server & redux. It's still a work in progress, but seems to work. https://github.com/hzhu/react-server-redux

It's a bit messy, but once I learn how to cleanly setup a redux project with react-server, I'll make the PR to react-server-examples

[woomike]

@hzhu Any chance you've had any luck using the RootElement's 'when' with Redux? I'd like to render a component only when an async data call has completed, but 'where' requires a Promise, and my dispatch will no longer work if I return a promise instead of a function.

https://react-server.io/docs/guides/understanding-rendering

[hzhu]

@woomike, did you mean RootElement's when attribute?

You can try representing your async data fetching as a promise, and put that, as the value to when.
For example..

const myPromise = new Promise((resolve, reject) => {
  // data fetch
  // async stuff here
})

<RootElement when={myPromise} />

Or more likely you might want to use ReactServerAgent.get() to fetch data from an api.
ReactServerAgent is a promise that represents the eventual result of the fetch.

I have a working demo of rendering async data using redux and react-server. The specific line you might want to check out is https://github.com/hzhu/react-server-redux/blob/master/src/pages/explore/index.js#L35

Note: I'm finding it very difficult to structure a redux app properly in react-server, i.e. how to manage store/stores & reducers. Let me know if you have some tips :)

[woomike]

@hzhu Thanks so much for getting back to me. My apologies on the typo, yes I meant when. I ended up being able to properly implement when and dispatch by using the handleRoute built into react-server.

    handleRoute(next) {
        this.data = Promise.resolve(store.dispatch(getFoo()));
        return next()
    }

    <RootElement key={0} when={this.data}>