• Store

The state of your whole application is stored in an Object tree within a single store. This object is like a ‘model’ except there are no setters. This is so that different parts of the code can’t change the state arbitrarily, causing hard to reproduce bugs.

• Action

The only way to change the state is to emit an action, an object describing what happened. Enforcing that every change is described as an action lets us have a clear understanding of what’s going on in the app.

• Reducer

To specify how a state tree is transformed by actions, you write pure reducers. Its just a function which takes state and action as arguments, and returns the next state of the app.

• References

http://redux.js.org/docs/introduction/CoreConcepts.html

http://redux.js.org/docs/introduction/ThreePrinciples.html

The simplest way to define a component is to write a JavaScript function. The function accepts a single “props” object and returns a React element. Such components are called Functional components because the are literally JavaScript functions.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// A function component using an ES2015 (ES6) arrow function:
var Aquarium = (props) => {
  var fish = getFish(props.species);
  return <Tank>{fish}</Tank>;
};

// Or with destructuring and an implicit return, simply:
var Aquarium = ({species}) => (
  <Tank>
    {getFish(species)}
  </Tank>
);

// Then use: <Aquarium species="rainbowfish" />

These components behave just like a React class with only a render method defined. Since no component instance is created for a function component, any ref added to one will evaluate to null. Function components do not have lifecycle methods, but you can set .propTypes and .defaultProps as properties on the function.

Advantage of Functional components is that they are much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks. This pattern is designed to encourage the creation of these simple components that should comprise large portions of apps.

Reference:

• Components and Props
• Functional vs Class-Components in React
• Stateless function components

A pure function is a function which:

• Given the same input, will always return the same output.
• Produces no side effects.

• Relies on no external mutable state.

• References

https://medium.com/javascript-scene/master-the-javascript-interview-what-is-a-pure-function-d1c076bec976

JavaScript code runs single threaded. Javascript has a concurrency model based on an event loop. The event loop is in the heart of Node.js / Javascript - it is responsible for scheduling asynchronous operations. A very interesting property of the event loop model is that JavaScript, unlike a lot of other languages, never blocks. Handling I/O is typically performed via events and callbacks, so when the application is waiting for an IndexedDB query to return or an XHR request to return, it can still process other things like user input.

Two main parts of the event loop are the call stack and the message queue.

The call stack is a LIFO queue (Last In, First Out).

The Message Queue is also where user-initiated events like click or keyboard events, or fetch responses are queued before your code has the opportunity to react to them. Or also DOM events like onLoad.

Event Loop is a process that constantly checks whether the call stack is empty, and whenever it’s empty, it checks if the event queue has any functions waiting to be invoked. If it does, then the first function in the queue gets invoked and moved over into the call stack. If the event queue is empty, then this monitoring process just keeps on running indefinitely.

Async callbacks

An asynchronous callback function is just like any other function you’re used to writing in JavaScript, with the added caveat that it doesn’t get executed till later.

(function() {

  console.log('this is the start');

  setTimeout(function cb() {
    console.log('Callback 1: this is a msg from call back');
  }); // has a default time value of 0

  console.log('this is just a message');

  setTimeout(function cb1() {
    console.log('Callback 2: this is a msg from call back');
  }, 0);

  console.log('this is the end');

})();

// "this is the start"
// "this is just a message"
// "this is the end"
// "Callback 1: this is a msg from call back"
// "Callback 2: this is a msg from call back"

The use case of

setTimeout(() => {}), 0)

is to call a function, but execute it once every other function in the code has executed.

References

• What is the JavaScript event loop?
• The JavaScript Event Loop
• The JavaScript Event Loop: Explained
• Philip Roberts: What the heck is the event loop anyway?
• Concurrency model and the event loop
• Understanding Async Programming in Node.js
• Introducing asynchronous JavaScript

This article explains how to create a simple React Todo example using Redux.

• Install create-react-app

https://github.com/facebookincubator/create-react-app

npm install -g create-react-app

• Create todo app using create-react-app command line.

create-react-app todo-react-redux

• Create the component, container, reducer, action folders.

cd todo-react-redux
mkdir components containers actions reducers

• Install required Redux and dependency packages

 npm install --save redux
 npm install --save react-redux

• Create the components Todo.js, TodoList.js, Footer.js, Link.js (https://github.com/harikrish/todo-react-redux/tree/master/src/components)

• Create the container components AddTodo.js, FilterLink.js, VisibleTodoList.js (https://github.com/harikrish/todo-react-redux/tree/master/src/containers)

• Create the reducers todos.js, visibilityFilter.js (https://github.com/harikrish/todo-react-redux/tree/master/src/reducers)

• Create the actions (https://github.com/harikrish/todo-react-redux/tree/master/src/actions)

• Update App.js, index.js (https://github.com/harikrish/todo-react-redux/tree/master/src)

• Run the server

npm start