Paul-PSDigital / react-redux-skeleton

A test bed for react, redux, redux-router, webpack projects

React Redux Skeleton

This project uses react, redux and redux-router as it's basis and forms a skeleton around these tools to allow you to get your app started quickly and easily.

This skeleton is suitable for both small and larger apps with multiple routes and numerous components and connecting to APIs.

It is based on https://medium.com/lexical-labs-engineering/redux-best-practices-64d59775802e, thanks to Will Becker for those pointers.

Install with:

$ npm i

Run the local server with:

$ npm start

Examples

The skeleton comes with some examples of routing and components:

1. Counter (demonstrating basic redux usage)
2. Current converter (more complex data and asynchronous actions with an API middleware)

If you wish to have an entirely clean setup, checkout the clean branch.

Components & Containers

It is important to maintain a distinction between dumb components that simply render content and smart components (containers) that handle business logic. This separation increases the reusability of both types.

A component must only contain html (jsx) and styling, deferring any dom events to it's parent container. Containers define event handlers and pass these to their children, they must not include any styling or content.

For example you may have a <SearchForm /> container that defines an onSubmit handler. This is passed down to it's child <Form /> component which would then only specify how the form is styled.

Shared vs. route components and containers

Generic components and containers that you are likely to reuse across multiple routes should be kept in shared/.

Many routes will have components that are specific to them and will likely all have their own container. These should be kept in routes/my-route/.

State

Your app's store is configured in config/store.js.

Modules: actions, reducers and dispatching

Modules are stored in modules/.

Routes

Your app's routes are defined in config/routes.js.

Import aliases

Webpack is configured to allow you to import your local files via aliases instead of long references to relative paths such as ../../../.

Alias	Directory	Example
modules	modules/	import example from 'modules/example';
components	shared/components	import example from 'components/example';
containers	shared/containers	import example from 'containers/example';
styles	assets/styles	@import '~styles/mixins/example';
images	assets/images	import logo from 'images/logo.png';
fonts	assets/fonts	src: url('fonts/comic-sans.woff');