Setup Redux, Redux-Debugger and React-Redux-Router in 4 lines!

announce
1

I’ve grown very tired of wiring up React, Redux, redux-react-router, redux-devtools, and react-router together in a production ready way for several apps so i’ve made a wrapper that glues them all together in a simple config.

This is currently released as an NPM package:

The minimal needed to get a redux based router and redux running is:

import {registerRedux} from 'simple-react-redux'

export const {dispatch} = registerRedux({
  routes: require('./routes'),
  renderToElementId: 'react-root',
});

However you’ll likely need reducers pretty quickly so you can add those and middleware like this:

import {registerRedux} from 'simple-react-redux'

export const {dispatch} = registerRedux({
  debug: true,
  routes: require('./routes'),
  renderToElementId: 'react-root',

  reducers: {
    app:   require('./reducers/app'),
    posts: require('./reducers/posts'),
  },

  middleware: [
    myCustomMiddleware,
  ],
});

any typically I keep my routes in a separate file to clean the up:

export default (props) => (
  <Router history={props.history}>
    <Route path="/" component={Layout} >
      <IndexRoute component={Home}/>
      <Route path="login" component={Login} />
    </Route>
  </Router>
);
19 Likes
2

Nice, would be great to have a an example meteor app for this.

2 Likes
3

It’s not an example app per se but it’s basically a regular boilerplate that utilizes it with a couple of pages. It can easily be dropped into Meteor 1.3. It’s configured in /store.js:

and changing routes uses the Link component and dispatch in each ‘page’.

4

Great stuff, thanks! I also felt setting up all of Redux was a bit of an annoying chore so this npm will come in very handy :slightly_smiling:

1 Like
5

weird - if I try to install your package, npm gives me a 404

1 Like
6

Trying to install the module directly from Github seems to work.

It then promptly proceeds to barf on this line:

import {registerRedux} from 'simple-react-redux'
> Cannot find module 'simple-react-redux'
1 Like
7

And now that I have tried to copy&paste your code into my app, I’m running into

Object expected

when using the minimal example you gave here.

Okay, my verdict: unusable with this barebone documentation. Installation is not simple, there is no working example and the docs are minimal to the point of uselessness.

8

@rhywden thanks for your feedback! Also i’m sorry this module gave you so much trouble.

The first issue is because I mistyped the readme and didn’t realize it. I also swapped the order of the name on the repo and npm module name without realizing it.

It should be npm install simple-react-redux not simple-redux-react.

I wrote the readme before writing the actual module and didn’t catch that when pushing to NPM. I’ll likely have to rename the repo to match the NPM name. Thanks for catching this! :smiley:

The 2nd issue I encountered when using this in a fresh meteor 1.3 app is that the root element doesn’t exist soon enough and errors out with a dom element doesnt exist error (a bit different than your error though). It works in normal React apps so i’ll have to dig into the Meteor quarks for this.

I’ve been so swamped in the past 2 weeks that I haven’t had time to touch this but i’m setting aside some time next week to get the docs up to snuff, add a guide for meteor and non-meteor apps, as well as some example apps for both.

Here’s an boilerplate app in a non-meteor app that uses it. I’ve used it in 2 apps so far without issues but like I said above still need to look at Meteor quirks.

1 Like
9

Maybe it’s as simple as wrapping your four lines in Meteor.startup()?

Will try it out when I get home.