React Redux

• Redux has no relation to React.
• Redux works really well when you use a library (like React) that let you describe UI as a function of state, and Redux emits state updates as a response to user actions.
• Read here, https://github.com/reactjs/react-redux/blob/master/docs/api.md#provider-store about Redux API.

React Router (react-router-dom)

To implement routing in a ReactJS application...

• You need to install react-router-dom
• Use the components BrowserRouter, Route, Switch, Link from react-router-dom module.
• Define the routes and wrap them in BrowserRouter
• Define the links
• and you are ready to go. 

npm i react-router-dom --save

Recently stumbled across this blog which is an interesting read on react-router-dom:
https://blog.pshrmn.com/simple-react-router-v4-tutorial/



Found this tutorial loaded on GitHub which gives a simple beginning and escalates to advanced level.

I liked the first line in the tutorial..."At its heart React Router is a component, and its not going to display anything until you configure a route". Read and practice the tutorial...

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route

Another good example:

https://www.digitalocean.com/community/tutorials/how-to-handle-routing-in-react-apps-with-react-router

Using Node.js require vs. ES6 import/export

Read one of the postings on stackoverflow and it gave me that "a-ha" moment.

http://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export

I am worried that I may lose this posting in stackoverflow so copying the question and answer from there to here for my future reference:


Question:

In a project I'm collaborating on, we have two choices on which module system we can use:

1. Importing modules using require, and exporting using module.exports and exports.foo
2. Importing modules using ES6 import, and exporting using ES6 export

Are there any performance benefits to using one over the other? Is there anything else that we should know if we were to use ES6 modules over Node ones?

Answer:

Keep in mind that there is no JavaScript engine yet that natively supports ES6 modules. You said yourself that you are using Babel. Babel converts import and export declaration to CommonJS (require/module.exports) by default anyway. So even if you use ES6 module syntax, you will be using CommonJS under the hood if you run the code in Node.

There are technical difference between CommonJS and ES6 modules, e.g. CommonJS allows you to load modules dynamically. ES6 doesn't allow this, but there is an API in development for that.

Since ES6 modules are part of the standard, I would use them.

React Redux

• redux provides an empty store where application state can be manufactured.
• You tell the store what to create as the application state, how to update the application state (thru reducer)
• store = Redux.createStore(reducer)
• Reading from the application state in application is straight forward: 
• store.getState()
• Updating the application state is by triggering the update logic in the store by dispatching the actions.
• store.dispatch({type: 'increase', graceMarks: 5})
• NOTE: When you update a state, you don’t update the state but rather create a new state out of old state.
• You can even subscribe to store to get the status on the updates.
• state.subscribe(state.getState())

• react-redux provides couple of additional facilities, Provider and connect.
• Provider to provide the store to the root component.
• Connect passes state, dispatch actions to child component. 

A sample using just redux:

// importing createStore from redux

import {createStore} from 'redux';

// Creating a reducer

const sampleReducer = function(state, action){

    if (!state){

         state = 0;

    }

    if (action.type === "INC"){

         state =  state + 1;

    }

    return state;

}

// Create a store. Passing in the reducer that i created above

const store = createStore(sampleReducer);

// subscribing to store to see the updates

store.subscribe(() => {

    console.log("state changed ", store.getState());

})

// start dispatching actions to store.

store.dispatch({type:"INC",payload:"something"})

Easy to learn: https://www.kirupa.com/react/introduction_to_redux.htm

There you go… You create a reducer, you create a store and then whenever you dispatch actions, the reducer or multiple reducers will act upon on that store.