Designing Google Calculator with React Redux Hooks

ThankGod Ukachukwu — Thu, 23 Apr 2020 18:41:30 +0000

Preamble

Redux made complete sense after I watched the video tutorial by Dan Abramov — the creator of Redux — and the tutorial by Reinald Reynoso. See the reference list at the end of the article.
Though I am late to the Redux party but I still think it is worthwhile writing this tutorial. Especially for those coming newly to React Redux that would find any relevant knowledge useful. This one could pop up in their frenzy search for knowledge.

The Concept

Redux “is a predictable state management library for frontend frameworks”. It’s popular in React. There are others like Mobx, Flux. But Redux’s simplicity and thinness makes it a library of choice in React.

One thing they often say about Redux is - “finding the right use case”. So somehow you need to have an application where you need to save state.
Don’t think you’d need some kind of complex application to use Redux. The simplest application where you need to save some state can suffice. I was thinking I have to get involved in a big project where I need to save user details, like school management or hospital management application or a social media app or an enterprise application before I would find that ‘use case” . Turned out that the calculator I designed to deepen my knowledge of React needed Redux because it could use some state saving.

I attempted to design the calculator you find when you type “calculator” or “Google calculator” on Google. The picture below is the one I developed, click here to see it.

How it Works

That calculator has “Ans” button to retrieve current answer, it saves the answer in memory, and also shows you the operands above the upper display. You can recall the last answer with Ans and use. When you do a computation, you replace the answer with the result or mathematical expression. If you press AC (all clear), you clear everything including the Answer saved. On start, Once you click a number (operand) or operator, the answer updates to 0 . If you do a calculation, the upper display shows you the expression, and display the answer in the lower display.

War Games

So here’s where Redux comes in. On start, as soon as we click a clickable operand/operator, the answer updates to 0. When we finish a calculation and click equal, we update answer and display the expression. If we click on Ans button. We will retrieve the answer and use in an expression. If we click a new operand or operator, we start a new computation but our previous answer is still saved. So tracking this state I think can be done with Redux, I don’t think it may be the most appropriate use case but that’s what I did. So we have three states - EQUAL, OPERATION and CLEAR.

To use redux we have to install it. You should have created your app with npm create-react-app MY-APP and before then installed CRA (create-react-app) all with npm or yarn. And get the React binding.

npm install redux ………………………………………………………………
npm install react-redux ………………………………………………………

Our actions and reducers are the main building blocks of using Redux. These are functions. Normal functions. Only that it’s recommended to use pure functions. A pure function returns a predictable result and do not have observable side effects. A pure function should not have side effects that causes our state to be unpredictable, such as accessing databases, running computations that do not bring the same outcome all the time. However, Redux Thunk solves the problem of asynchronous behaviour. See reading list at end for more. Also see the third video in Dan Abramov’s egghead video tutorial.

Take Action And Reduce The Tension

So your actions are functions that ship plain objects to Redux store to be accessed to manage state. One of the object member should be a enumerable type. Such as STORE, OPERATION, CLEAR. Here are the action objects used in the Calculator. Each action describes if we are doing an operation, get the result of expression using equals operand or clearing the display.

Reducers are functions which are fed into the Redux store which uses a switch statement based on the action sent returns a desired state or the default state. Here's the reducer for this Calculator. Our actions are imported into the reducer. We insert the initialstate (depending on the logic of our application) and create the store. The createstore method can be fed the initialState too. It takes a third argument which can be a middleware like Redux Thunk. We can combine reducers and pass them into the createstore method if you have multiple reducers to track.

Then we go to the component which needs redux and feed in the provider of the store to our component. For this use case, it’s the App.js where the calculator component lives.

Now to the Calculator components. Find screenshots of relevant parts below. It uses functional components and hooks.

We need the useDispatch and useSelector hooks for functional components. The useDispatch is to to send actions which delivers state objects to our store. The selector is used to access the state of the store. Here is where I used them below. I used this function to add the operand and operators and I need to track the state.

When computation is done. Answer to expression computed is dispatched. When AC, cleans up the display area too.

So basically we are able manage the three state we need. Something tells me this can be done with ordinary hooks. In the bid to learn I have to make up a use case.

Find below where I assessed the value from useSelector.

useSelector returns the state object. So don’t mistake it and put a [] around it. Like other hooks that return an array. Access it like a normal object. About preloaded state. On the Redux documentation, they discussed preloadedState in which the createStore method should be given a preloadedState to set initial state. Else it will be undefined. createStore takes three parameters, the reducer, preloadedState, and enhancer. PreloadedState State should be a plain object. Don’t pass in for instance “initialState” instead of initialState() which is one of your actions that returns a plain object. Then if you didn’t give it a preloadedState, the useSelector returns a DefaultRootState which is undefined.

Redux may not be the silver bullet in state management even in React. Kent C Odds has done a good tutorial on using Context API. You can read the list at the end and also one written by Ebenezer Don who said we should discard React + Redux and use hooks + Context.

Nonetheless. This is what Redux does, manages application state. This is just basic. Watch Dan Abrov videos for more.

From the Experts:
Dan Abramov’s videos, see video 3 for pure functions and the rest of it for basic and advanced Redux.!
Reinald Reynoso’s tutorial, one of the two that made it make sense.
Tania Rascia is comprehensive guide, it includes middleware usage Redux thunk for asynchronous behavior.
Kent C Odds (another React guru) advised that we “use context only when prop drilling really becomes a problem”.!
Ebenezer Don thinks we should all “Use Hooks + Context, not React + Redux”
For replacing Redux with custom hooks, see Jolanta’s tutorial.
Meanwhile the calculator is a work in progress.

Staysafe

Enabling ES6 Features (Import and Export Default) In Node.js with Babel

ThankGod Ukachukwu — Tue, 14 Apr 2020 14:09:05 +0000

Despite preponderance of tutorials on existing knowledge, it is important to document our learning experiences so that newbies can learn from different perspectives. Most important, some of the things we learned or issues encountered and later resolved are scattered all over the ecosystem in questions on Stackoverflow and Github and blogs and tutorials on medium and many blogs out there.

To get past them we glean information from many sources. As a late comer to programming writing and tutorial, my goal is to try and bring these disparate knowledge I encounter together so that anyone who happens upon it will learn from all those sources at once and from an updated viewpoint.

Sometimes, it is important to read the perspective of a learner so those who are learning can have a feel of what it was like before crossing the rubicon to the other side, from the unknown to the known.

Node.js is the Javascript standard platform for server-side development. Express is the oldest and most popular web framework for Node.js. Most beginners start from learning express.

The default standard for Node.js module handling is CommonJS. Where we have module.exports and require. For Node.js in ES6 environment we will need a compiler to translate ES6 to CommonJS.

Recent Node.js 13.2.+ supports ECMAScript modules inbuilt but the LTE (Latest Stable Edition) v12.16.2 does not. The latest support most likely will take some months or even another year before projects begin to move to that version features. The support for Import and Export statements in the LTE needs to be enabled and run via - experimental-module to use them. Example:

"start: node - experimental-modules ./src/index.js"

The key to enabling this behaving is including the below in package.json
"type": "module"

Again, one of the typical errors that will be encountered is:

Error while loading config - You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously

This is because your project would have generated or you may have added babel config as Javascript file extension(babel.config.js). Babel, very popular, "is a JavaScript compiler." Simply as it is on the github page,

Babel is a tool that helps you write code in the latest version of JavaScript. When your supported environments don't support certain features natively, Babel will help you compile those features down to a supported version.

So we get modern Javascript features with Babel compiler. So in our Node.js project, the use of .mjs, cjs or js extension for the babel.config.extension is one of the requirements. For v12. the right file extension is .cjs which means CommonJS. So the configuration at the root of my directory becomes babel.config.cjs. See more about it here on babel docs. For deeper dive read this.

Don't forget that for all these to work on Node.js, this configuration is necessary in the babel.config.cjs.

module.exports = {
presets: [
[
'@babel/preset-env',
{
targets: {
node: 'current'
}
}
]
]
};
Here is a related interesting read I will recommend. #Staysafe.

DEV Community: ThankGod Ukachukwu

Designing Google Calculator with React Redux Hooks

Staysafe

Enabling ES6 Features (Import and Export Default) In Node.js with Babel