I Think, I Thought, I Thunk#407
What is Redux Thunk used for?
— By default, Redux’s actions are dispatched synchronously, which is a problem for any non-trivial app that needs to communicate with an external API or perform side effects. Redux also allows for middleware that sits between an action being dispatched and the action reaching the reducers.
There are two very popular middleware libraries that allow for side effects and asynchronous actions: Redux Thunk and Redux Saga. In this post, you will explore Redux Thunk.
Thunk is a programming concept where a function is used to delay the evaluation/calculation of an operation.
Redux Thunk is a middleware that lets you call action creators that return a function instead of an action object. That function receives the store’s dispatch method, which is then used to dispatch regular synchronous actions inside the function’s body once the asynchronous operations have been completed.
What is the difference between React Native and React?
— React and React Native are two powerful technologies that are behind some of the most popular web and mobile applications in the world today. You’re probably not even aware, but you use at least one of the two every single day. So what’s the difference between React vs React Native?
— React and React Native are two technologies used in the development of web and mobile applications. Both use JavaScript and are known for building web and mobile user interfaces (UI).
— As you read on, we’ll break down the differences between React vs React Native, define their strengths and weaknesses, and provide some examples of companies that have adopted the two technologies.
What is React?
— React, or ReactJS is an open-source JavaScript library for building user interfaces (UI) specifically for single-page applications. React was first conceived by Jordan Walke, a Facebook software engineer back in 2012 — where the technology was developed internally before it was deployed on Facebook.com and later to Instagram.com.
— React had to be extracted from Facebook’s codebase so that Instagram could use it, which in a sense, means Instagram was the first ‘external’ user of React. This led to the open-sourcing of the technology for the rest of the world.
— React is designed in a way that allows it to easily integrate with existing code or other libraries. Its primary purpose is to simplify the process of developing and building web applications that are fast, scalable, and simple.
What is React Native?
— React Native is the younger sibling of React. Following the glowing reception of React in 2013, Facebook began working on a cross-platform mobile framework to keep up with the tech giant’s growing mobile needs. In March 2015, Facebook announced that the technology was open and available on Github.
— Like React, React Native is also based on JavaScript but is designed to build native mobile applications with reusable components. What does that mean? Imagine a builder used a different drill to build a house and to build an apartment. It would be tedious and unnecessary. Before React Native, app developers had to use various tools for different platforms like a builder having a special drill for each type of building he constructs.
— That’s where the real power of React Native lies. React Native enables the creation of applications across multiple platforms (Windows, Android, iOS) smoothly and seamlessly. Like any siblings, React and React Native share similarities but also have distinct differences, which we’ll elaborate on later.
Are you familiar with AMD/require.js or commonjs? What can they do for you?
— RequireJS implements the AMD API (source).
— CommonJS is a way of defining modules with the help of an exports object, that defines the module contents. Simply put, a CommonJS implementation might work like this:
// someModule.js
exports.doSomething = function() { return "foo"; };//otherModule.js
var someModule = require('someModule'); // in the vein of node
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
— Basically, CommonJS specifies that you need to have a require() function to fetch dependencies, an exports variable to export module contents and a module identifier (which describes the location of the module in question in relation to this module) that is used to require the dependencies (source). CommonJS has various implementations, including Node.js, which you mentioned.
— CommonJS was not particularly designed with browsers in mind, so it doesn’t fit in the browser environment very well (I really have no source for this — it just says so everywhere, including the RequireJS site.) Apparently, this has something to do with asynchronous loading, etc.
— On the other hand, RequireJS implements AMD, which is designed to suit the browser environment (source). Apparently, AMD started as a spinoff of the CommonJS Transport format and evolved into its own module definition API. Hence the similarities between the two. The new feature in AMD is the define() function that allows the module to declare its dependencies before being loaded. For example, the definition could be:
define('module/id/string', ['module', 'dependency', 'array'],
function(module, factory function) {
return ModuleContents;
});— So, CommonJS and AMD are JavaScript module definition APIs that have different implementations, but both come from the same origins.
- AMD is more suited for the browser, because it supports asynchronous loading of module dependencies.
- RequireJS is an implementation of AMD, while at the same time trying to keep the spirit of CommonJS (mainly in the module identifiers).
— To confuse you even more, RequireJS, while being an AMD implementation, offers a CommonJS wrapper so CommonJS modules can almost directly be imported for use with RequireJS.
define(function(require, exports, module) {
var someModule = require('someModule'); // in the vein of node
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
});Explain your personal troubleshooting techniques. Include devtools and environments.
Troubleshooting for me usually consist of using console.log and the devtools console in Chrome. Keeping my code clear and organized to get useful errors (aka computer please tell me why you no work).
