Add Redux Structure

[jakecraige]

• Set up the Redux store with hot module reloading
• Add a shared App component that's used for iOS and Android
• Set up a Redux structure using the ducks-modular-redux pattern.
• Add a simple counter module and wire it up to the UI to show how it works.

The Ducks pattern is my current preferred structure as it provides a nice organization of your redux specific things in an isolated file so you aren't passing having to constantly import constants, action creators etc.

It's also beneficial in that your transformations around a specific part of your store in one place so it's easier to track down what's happening in your action creators and reducers.

It supports growth well in that you can turn a single file module into a directory and separate it out if it gets complicated, or break it up into other modules while still keeping everything in fairly close together.

TemplateProject[jc-redux] $ tree app
app
├── containers
│   └── app.js
├── index.js
└── redux
    ├── modules
    │   ├── counter.js
    │   └── index.js
    └── store.js

3 directories, 5 files

[jakecraige]

cc @thoughtbot/react

[gilesvangruisen]

This is great!! Nice work @jakecraige. Do you mind posting a tree/directory structure diagram with these changes?

[jakecraige]

@gilesvangruisen good idea. Added to PR description.

[BlakeWilliams]

We actually removed the containers directory in our app since it ended up being too much to maintain given multiple routes with the same name (eg: logged in vs logged out) and having to move components in/out of that directory based on connecting them or not.

I haven't used redux-ducks before, but it looks interesting. Can't say I'm 100% sold on the modules name for the folder though.

Overall LGTM though, 👍

[jakecraige]

Interesting about containers. I find myself using it mostly for top level "screens" when I have a router and then everything else is in components. A similar thing could be done within the components dir with a "screens" dir or simply a consistent suffix. I generally try and only keep the top level components connected, but I have had a few others like a global spinner, buttons in the nav bar I don't have control of how they're put there, etc. I wouldn't be totally against removing it. Would be interesting to have another PR that does to discuss.

Agree on modules don't really love it or hate it, seems... fine, lol.

I do wonder if the "redux" dir is necessary. I added it cause I've seen some other projects do that, but I'd also be okay with modules at the root and a file for the store at the root as well.

[BlakeWilliams]

Interesting about containers. I find myself using it mostly for top level "screens" when I have a router and then everything else is in components.

That's what we started with on our current client project until we removed it in favor of connecting as needed in the tree. I definitely prefer it that way now. I can save it for another PR though.

I do wonder if the "redux" dir is necessary. I added it cause I've seen some other projects do that, but I'd also be okay with modules at the root and a file for the store at the root as well.

I was thinking on it, and came up with the same thing. I generally keep store top-level with app.js and then have a reducers folder. Maybe that could be a good pattern here?

[sharplet]

@jakecraige might want to pull 657c230 on master as the cookiecutter is behind.

[jakecraige]

Thanks, cherry picked it in 👍

@BlakeWilliams I'd be cool with having it at the root, but could calling it reducers be confusing because it also contains the action types, creators, middewares, etc?

[BlakeWilliams]

Hmmm, would middleware go in there?

It might not be the most obvious, but I think finding actions + action creators in there too would make sense if there's no extra folder for them.

[jakecraige]

That probably wasn't clear, when I say middleware I mean things like sagas, observables, etc. Basically the side-effect hooks for things happening.

Yeah I don't think it would be totally surprising to find those there, and once you know you know, I just wonder if there is some unicorn perfect name we're not considering 🤔