Adding Redux To AtlasParcel Boilerplate

AtlasParcel is a starter application to empower developers to start a single page application powered by React, Atlaskit, Parcel, and (now) Redux.

About The Project

Setting up a new single page application with React can be a pain. AtlasParcel is the pain killer in this regard. You can set up and deploy a new project in minutes thanks to Parcel and Atlaskit.

This boilerplate should make it quite easy to build something based on top of it. It has a great developer experience with zero configuration needed. Thank you, Parcel.

A developer can see changes instantaneously in the browser. After you have started your project with yarn start, a development server will be started which picks up any saved changes and displays the updated application in your browser; without the need to reload. Hot-reloading is a huge time saver.

Some of the application's UI state has been already wired up to Redux. Mainly to show how it is done. A good application structure for managing state can be seen in the state folder.

It is also easy to build the project with just one command: yarn build. If you have Netlify installed you can even deploy it with one command: netlify deploy

Technology Stack

• Babel—Next generation JavaScript
• React—A JavaScript library for building user interfaces
• Atlaskit—Atlassian's official UI library
• Parcel—Blazing fast, zero configuration web application bundler
• Redux—Predictable state container for JavaScript apps

New Features

• React Router 4
• Redux integration of react router
• Redux integration of UI state

Roadmap

• Update to use React Router 4
• Add Redux for state management

This project is now considered feature complete. It has everything to get a fresh app up and running quickly.

Getting Started

Building your project on top of this starter is straightforward. Just clone the starter in a folder with your project's name. Then remove the Git history to be able to initialize your own Git repository. Then install the dependencies with yarn. When the installation has finished, you can run the new app with yarn start. These are the steps in more detail:

git clone https://github.com/cutemachine/atlasparcel.git YOUR_PROJECT
cd YOUR_PROJECT
rm -rf .git
git init
git add .
git commit -m 'Initial version of YOUR_PROJECT'
yarn
yarn start

Using Redux

Redux has been added to the AtlasParcel starter. So a developer can just use it without the need for any further work. Even the React Router has been wired to the Redux store. So it is easy to react to state changes regarding routes.

Using Redux and adding own state slices to handle the application's needs might be harder. So I would like to give a walkthrough of the folder structure.

This is the file structure for handling the application state:

src/state
src/state/ui
src/state/ui/actions.js
src/state/ui/operations.js
src/state/ui/reducers.js
src/state/ui/selectors.js
src/state/ui/types.js
src/state/rootReducer.js
src/state/store.js

If you want to add a new state slice to your application you would copy the state/ui folder with its contents to a new folder and name it appropriately.

Let's suppose you want to manage the state of a shopping cart, you would copy state/ui to state/cart.

Then in the root reducer src/state/rootReducer.js you would add the state slice like so:

import uiReducer, { uiSelectors } from './ui'
import cartReducer, { cartSelectors } from './cart'

// …

const rootReducer = combineReducers({
  router: routerReducer,
  ui: uiReducer,
  cart: cartReducer
})

// …

Now you can make changes to the cart state slice by adjusting the files in src/state/cart/. The rest of the files are just normal Redux stuff. You can learn more about using Redux on the excellent Redux docs.

Repository Changes For Adding Redux

The branch for adding the Redux store can be reviewd on GitHub.
The branch has been merged into master.

Demo

Check out the updated live demo of AtlasParcel with Redux integration.

How To Contribute

Do you want to contribute to this project? Great. You can contact me through my Github profile page or just send a pull request.

---

Posted on Utopian.io - Rewarding Open Source Contributors

---