Create a Redux or Relay (or your favorite framework) starter kyt

[delambo]

Even though Graphql/Relay are picking up, Redux still seems to be the default data management tool for most new React apps. We've had some discussion in our universal starter kyt about creating a kyt-starter-universal-redux. I'd love to see a POC from any experienced Redux developers, or at least please chime in with some thoughts in the discussion.

We're using Graphql and Relay for some of our projects so we would also like to see a POC for a Relay based starter kyt. There's been a little bit of discussion about it here.

Could either of these starter kyts be forked from kyt-starter-universal so that they would be easier to maintain?

[RobAWilkinson]

I could take care of the redux starter kit.

What about one using apollo-client instead of relay?

[delambo]

Thanks for stepping up, @RobAWilkinson!

What are some of your ideas for a redux starter kyt? Did you see this POC? And did you see some of the concerns that were brought up in this comment? I'd love to hear your thoughts (or anyone else!), or feel free to start a POC to show them off.

Regarding an Apollo starter kyt: The cool thing about starter kyts is that anyone in the community can create one and share it with others via kyt setup -r <repo>. We would love to hold onto and maintain some core starter kyts in the NYTimes github repository. That way we can keep popular starter kyts up to date with changes in kyt and make sure they get good exposure. If you create an Apollo starter kyt we will give you a link in the starter kyt section of the README for some promotion. I'd still prefer a Relay starter kyt, but Apollo looks really cool and I'm sure it would be useful to others.

[julianvmodesto]

Hey there! I wanted to get this in for Hacktoberfest 🎃 hopefully it's a decent start for a Redux starter kyt. Could anyone take a look?

https://github.com/julianvmodesto/kyt-starter-universal-redux

[ghost]

Thanks for putting this up, @julianvmodesto

I may be able to look it over in the next week or two. I'm using the kyt-universal-starter repo that you've forked from in a new project, and I'm still deliberating whether or not I'll be wanting redux or not in this particular project.

Either way, I'm really liking the kyt-universal-starter, and will certainly be trying out your fork at some point soon. Thanks again for breaking ground on this one :)

[janhoogeveen]

Just to chime in: I've made a fork as well based on the work from https://github.com/julianvmodesto/kyt-starter-universal-redux and cleaned it up a little bit. Added an example reducer to the store in the Ducks format and made sure react-router changes are tracked in the store as well.

After that I went a little overboard and decided to add even more packages and features, so I don't have a fork available where we only added redux but our Starter Kyt can be found here: https://github.com/cleverfranke/cf-kyt-starter-universal-redux

The 1.0.0 releases solves a few other problems like fetching data on the server and putting them in your store before returning HTML in Express and returning 404 status codes when Express finds out we're serving a NotFound component.

Today we released a 1.1.0 release with preliminary support for service workers.

EDIT: Linked to a few of the features I've added after forking the redux example from @julianvmodesto

• Example of using Redux normally
• Example of using Redux-Thunk
• Connecting a Component to Redux
• Fetching data and populating the store on the server
• Making sure to return a 404 status code when we don't find a resource and use a catch-all route
• Added support for static PropTypes in Components with Babel
• Added support for service-workers in the build script
• Added Helmet to track and change meta information
• Fixes a bug where the root component is always active
• Export non-default components so you can test them without running into @connect/Redux troubles in Jest.

[jcalfee]

Anyone thinking about the unit tests yet?

It appears they need to be initialized with either src/client/index.js or src/server/index.js (test could be in src/client or in src/server). I'm thinking separate "scripts" in package.json will be needed.

I also noticed that when trying test my redux code, import "babel-polyfill"; is needed to get it to recognize generator functions (functions* ...). With this fix in place, the test still fails in an unrelated library because the reduce function on an array is undefined. These issues appear even though I'm using node v7.5.0 and even though the project runs and builds fine (it is just in jest things break down)..

[johndavedecano]

@jcalfee @janhoogeveen @delambo @julianvmodesto

If you want to implement immutableJS, axios, reselect, redux-logger and normalizr.

https://github.com/johndavedecano/kyt-redux