@chanoch/clearsite-engine

simple-react-router

Implementation of a simple react router, with templating

This was inspired by Konstantin Tarkus's alternative to react router from You might not need React Router

In Konstantin's system, an array of routes together with the root level 'page' component that will render the root to the router. This array is used with the history component to integrate with the browser's navigation and redux to support navigation through the application.

The general workflow is that each user interaction results in a page being loaded into history followed by any mutations to state as redux middleware. This results in the page being updated

To create an application using clearsite:

• Define the routes
• Define reducers and initial state
• Define middleware
• Create your initial route
• Instantiate the router
• Load async server data

0. Setting up your application

The Single Page Application's (SPA's) HTML page is a standard react page which contains the following div to mount the application to:

        <div id="root"></div>

The HTML page must also include an import for javascript for your application. I use webpack to bundle my JS and dependencies but in general vendor js and css is imported statically into the page to benefit from CDN content delivery offloading and performance optimisation.

The webpack js files are imported statically rather than letting webpack inject them into the HTML as the index.html file is dynamicaly generated to inject configuration.

The reducers, redux middlware, and action creators are all standard redux mechanisms so you will need to define those according to the redux standards.

1. Define your routes

// Each page component is imported
import MyComponent from './MyComponentPage'

import React from 'react'

// The link between routes or paths in the application are provided in the path property for
// each object in the routes array.
const routes = [
    { path: '/menuplanner/', action: (store) => <MenuPlanner store={store} /> },
    { path: '/menuplanner/selectmenu.html', action: (store) => <ChooseRecipes  store={store}/> },
]

export default routes

2. Define reducers and initial state

A redux reducer modifies the state according to the state change which just occurred. It shouldn't have side-effects.

export function createMealPlanReducer(state, action) {
    return {
        ...state,
        mealPlan: action.mealPlan,
        action: CREATE_MEAL_PLAN
    }
}

3. Define middleware

The middlware will be injected with the state and the history object. This means that middlware can both mutate the state and navigate.

4. Create initial route

5. Instantiate the router

6. Load async data and dispatch a state change

TODOs

• Change the application to include a container type top level component to allow alternative mount points and passing in configuration?
• Link to redux tutorial
• Link to webpack tut on setting up a simple project
• Testing

Change Log

• 0.1 to 0.2 - implemented smart defaulting to null implementations for state, middleware, and reducer, Moved routes parameter which defines valid navigation to front of list to make those related to redux optional.