Redux-thunk gives us the ability to call async methods inside one of our Redux actions. For example, imagine we needed to call an API and use the response data to update Redux state. Instead of doing the API call in our component, we can just add redux-thunk
as middlewhere to our store and add another action which calls the API and then calls our normal Redux actions to update the Redux state. This is useful if for example we wanted to call a different dispatch action based on if the API returns successful
or fails.The first step is to add redux-thunk to the store. I am using TS so the implementation is as follows:<pre>// INSIDE STORE INDEX FILE
<code>
import { createStore, applyMiddleware } from &#39;redux&#39;;
import { composeWithDevTools } from &#39;redux-devtools-extension&#39;;
import thunk from &#39;redux-thunk&#39;;

import reducer from &#39;../reducers/indexReducers&#39;;

export const store = createStore(
 reducer,
 composeWithDevTools(applyMiddleware(...[thunk])) 
);

</code></pre>Below shows 2 normal Redux actions and then a redux-thunk action<pre>// REDUX ACTIONS FILE
<code>
import axios from &quot;axios&quot;;

export const updateForm:Function = (step:string, name:string, payload:string) =&gt; {
 return { type: &quot;UPDATE-FORM&quot;, step, name, payload};
}

export const updateFormError:Function = payload:string =&gt; {
 return { type: &quot;UPDATE-FORM-ERROR&quot;, payload };
}

// Example Thunk
export const updateFormFromApi:Function = (step:string, name:string) =&gt; {
 return async (dispatch) =&gt; {
 try {
 const res:any = await axios.get(&#39;https://jsonplaceholder.typicode.com/todos/2&#39;);
 console.log(res);
 dispatch(updateForm(step, name, res.data.title));
 }
 catch (err) {
 dispatch(updateFormError(&quot;Some error message&quot;));
 }
 }
}

</code></pre>This can then be called like this in our React component using react-redux (v7+ for the useSelector and dispatch hooks)<pre>// INSIDE REACT COMPONENT
<code>
import { useSelector, useDispatch } from &#39;react-redux&#39;;
import { actions } from &#39;../actions/indexActions&#39;;

const dispatch = useDispatch();

// Then in the return template</code><code>
&lt;button type=&quot;button&quot;&gt; {dispatch(actions.<code>updateFormFromApi</code>(&#39;step1&#39;, &#39;firstName&#39;))}}&gt;Click me&lt;/button&gt; 
</code></pre>

Simple Redux Thunk Example

To discover how many vulnerabilities are in your project or application just run &#39;npm audit&#39; (if you are using something like Nexus as a package holder and your devops team haven&#39;t set it up to handle audit requests, then you may need to comment out your .npmrc file to ignore those dependencies). You will then see the number of Low, Moderate&nbsp;and High&nbsp;vulnerabilities. You can run &#39;npm audit fix&#39; to be able to try and automatically fix a lot of the issues listed. However, it may suggest running &#39;npm audit fix --force&#39; to force fix any issues that it thinks may cause breaking changes by fixing. So far I usually find by running force that Webpack was updated to version 5 and reverting this back to 4 solved a lot of my issues after the force. But be warned, using force can break your application.Some of the vulnerabilities listed may not be solvable by using --force. Usually these are the vulnerabilities caused by child packages which are being used inside one of your dependencies. For example sass-lint uses the merge&nbsp;package which has some issues. <img class="fr-dib" src="https://cdn.cosmicjs.com/23b88820-dfdb-11eb-abd4-c7e38643a663-1625741868147.jpg" style="width: 300px;">To resolve this we can see that it is patched in versions &gt;=2.1.1&nbsp;but we can&#39;t simple add it to our package as its a child dependency of another package.How to Resolve1. To resolve this we do need to add the correct package to our project, so add the correct version by running: &#39;npm i --save-dev merge@2.1.1&#39;.2. Now we need to install the npm-force-resolutions&nbsp;package. &#39;npm i --save-dev npm-force-resolutions&#39;.3. Add resolutions to your package.json like this:<pre><code>&quot;resolutions&quot;: {
 &quot;merge&quot;: &quot;2.1.1&quot;
}
</code></pre> You will also need to add a prebuild script to your package.json scripts like this:<pre><code>&quot;preinstall&quot;: &quot;npx npm-force-resolutions&quot;
</code></pre> After this make sure to run &#39;npm i&#39; again. Then running &#39;npm audit&#39; you should now see the vulnerability has gone from the list.

How to Remove NPM Package Vulnerabilities

My favourite thing about using TypeScript is that your code editor can catch type errors before you even run your code. And my favourite JavaScript framework is React, which as standard is for writing in normal JavaScript. That doesn&#39;t however mean
we can&#39;t write React applications in TypeScript. We can! Which means we get the best of both worlds. I will write another longer article about how to use TypeScript with React because there is quite a lot to cover.The first obstacle I find developers come across when writing TypeScript with React, is the ability to use React&#39;s useState hook. Or more specifically:&quot;how do you assign a type against React state when setting the default value using the useState hook?&quot;The answer is, like this. I have added multiple examples for some different types below:String type<pre><code>const [myString, setMyString] = useState&lt;string&gt;(&#39;default string&#39;);
</code></pre>Number type<pre><code>const [myNumber, setMyNumber] = useState&lt;number&gt;(0);
</code></pre>Boolean type<pre><code>const [myBool, setMyBool] = useState&lt;boolean&gt;(false);
</code></pre>Setting an array type using an interface:<pre><code>interface myArrayInterface {
 name: string;
 age: number;
 default: boolean;
}

const [myArray, setMyArray] = useState&lt;<code>myArrayInterface[]</code>&gt;([]);
</code></pre>

How to use TypeScript with React Hooks

If you&#39;ve ever tried to test a React component which calls an API on load of the component, then you will probably have found them a little complex when it comes to writing your Jest and Enzyme tests. You often find that your mocked endpoints return
the incorrect status or your tests run before the mocked api call has returned the data you need. This article will attempt to simplify this.Lets start with our React component. To keep it as simple as possible, I have used just plain JavaScript and not TypeScript. However, the solution applies to both:<pre><code>
import React, { useEffect, useState } from &#39;react&#39;;
import { hot } from &#39;react-hot-loader&#39;;

// services
import myService from &#39;../services/myService&#39;;

const Component = () =&gt; {

 const [loading, setLoading] = useState(false);
 const [data, setData] = useState({});
 const [error, setError] = useState(&#39;&#39;);

 useEffect(() =&gt; {

 setLoading(true);

 myService.GET(&#39;/my-endpoint&#39;)
 .then(res =&gt; {
 setData(res.data);
 setLoading(false);
 })
 .catch(err =&gt; {
 setError(&#39;Unable to load data&#39;);
 setLoading(false);
 });

 });

  return (   <div>        { data ? &lt;p className=&quot;data&quot;&gt;{data.myData}&lt;/p&gt; : &#39;no data&#39; }</div></code><code><div>        { error ? &lt;p className=&quot;error&quot;&gt;{error}&lt;/p&gt; : null }</div>  );
}

export default hot(module)(Component)

</code></pre>This is a simple component which is using React Hooks. It calls myService.GET on load of the component and then sets some React state based on the promise response. Then there&#39;s some conditional rendering in the return statement of the component which
renders different P tags based on whether we receive data from the api or not.Our unit test comes next. In our test file we have the following:<pre><code>
import React from &#39;react&#39;;
import Adapter from &#39;enzyme-adapter-react-16&#39;;
import { mount, configure } from &#39;enzyme&#39;;
import MockAdapter from &#39;axios-mock-adapter&#39;;
import axios from &#39;axios&#39;;
import { act } from &#39;react-dom/test-utils&#39;;

configure({ adapter: new Adapter() });

import Component from &#39;./src/components/Component&#39;;

describe(&#39;Component&#39;, () =&gt; {
 const mock = new MockAdapter(axios);


 it(&#39;should be able to load Component and handle a 200 response correctly&#39;, async () =&gt; {

 const url = &#39;YOUR-DOMAIN-OF-THE-ENDPOINT-HERE&#39; + &#39;/my-endpoint&#39;;

 mock.onGet(url).reply(200, {myData: &#39;Some data, it doesnt matter for this example.&#39;});
 const wrapper = mount(&lt;Component /&gt;);

 await act( async () =&gt; {
 await new Promise(resolve =&gt; setImmediate(resolve));
 wrapper.update();
 expect(wrapper.find(&#39;p.data&#39;).text()).toEqual(&#39;Some data, it doesnt matter for this example.&#39;);
 });

 });


 it(&#39;should be able to load Component and handle an error response correctly&#39;, async () =&gt; {

 const url = &#39;YOUR-DOMAIN-OF-THE-ENDPOINT-HERE&#39; + &#39;/my-endpoint&#39;;

 mock.onGet(url).reply(404, {});
 const wrapper = mount(&lt;Component /&gt;);

 await act( async () =&gt; {
 await new Promise(resolve =&gt; setImmediate(resolve));
 wrapper.update();
 expect(wrapper.find(&#39;p.error&#39;).text()).toEqual(&#39;Unable to load data.&#39;);
 });

 });


});
</code></pre>In this test file you can see we have one describe with 2 tests. The first test mimics a 200 response with some mocked data and the second does the same but mimics a 404 response. The important bits here are the async awaits and this line:<pre><code>await new Promise(resolve =&gt; setImmediate(resolve));
</code></pre>This line makes sure our promise resolve or reject before our tests run. Then we update the wrapper to ensure when our tests run following this, that the DOM has updated and we can successfully target our elements based on the mocked data responses.

Mocking APIs in a React application using Jest

Sometimes I have found I have an object in my Redux store which has multiple children properties and I need to update some of the object properties but keep the rest the same i.e. I need to merge 2 states together. If this is how our Redux store looked to start with: currentState<pre><code>{
    profile: {
        title: &#39;Mr&#39;,
        firstName: &#39;Jose&#39;,
        lastName: &#39;Mourinho&#39;
    }
}</code></pre> And our new state was like this: changeState<pre><code>{
  profile: {
      firstName: &#39;Ole&#39;,
      lastName: &#39;Solksjaer&#39;
  }
}</code></pre> To merge these states we can use the assign method. I have created a React method that returns the merge of the 2 states.<pre><code>const assign = Object.assign || require(&#39;object.assign&#39;);

_mergeCurrentState(currentState, change) {
    return assign(currentState, change);
}</code></pre> We can call it like this and pass it straight into our changeProfileData Redux action:<pre><code>this.props.dispatch(actions.changeProfileData(
    this._mergeWithCurrentState(currentState, changeState)
));</code></pre> Our changeProfileData action looks like this:<pre><code>export function changeProfileData(newState) {
    return { type: &#39;PROFILE&#39;, newState };
}</code></pre> Our reducer would look something like this:<pre><code>export default function data(prevState = {}, action) {

  switch (action.type) {
  case &#39;PROFILE&#39;:
    return assign({}, prevState, {
      profile: action.newState
 });

  default:
    return prevState;
 }

}</code></pre> Our new Redux store data would look like the following. The title hasn&#39;t changed but the &#39;firstName&#39; and &#39;lastName&#39; have been updated.<pre><code>{
  profile: {
      title: &#39;Mr&#39;,
      firstName: &#39;Ole&#39;,
      lastName: &#39;Solksjaer&#39;
  }
}</code></pre>

Merging states in Redux store

React hooks allow us to use some React abilities outside of a React class component. Such as &#39;state&#39; and &#39;setState&#39;.<pre><code>import React, { useState } from &#39;react&#39;;

export default MyComponent = () =&gt; {

 const [name, setName] = useState(&#39;Harry&#39;);

  const handleClick = () =&gt; {
    setName(&#39;Jacks&#39;);
 }

  return &lt;div&gt;
    &lt;p&gt;{name}&lt;/p&gt;
    &lt;button onClick={handleClick}&gt;Set name as Jacks&lt;/button&gt;;
  &lt;/div&gt;
}</code></pre> The important bit is this line:<pre><code>const [name, setName] = useState(&#39;Harry&#39;);</code></pre> The &#39;name&#39; is the name of the state object. The &#39;setName&#39; is the method we call to update the &#39;name&#39;. The value we pass to the &#39;useState&#39; method is the default state of &#39;name&#39;.

React Hooks

I often find when using React and Redux, I need to update a specific value in my redux store and the only difference is the key and the value. For example: key: &#39;firstName&#39;, value: &#39;Harry&#39;. An example action might look like:<pre><code>export function changeFirstName(newState) {
    return { type: &#39;FIRSTNAME&#39;, newState };
}</code></pre> So if we now needed to add an action for &#39;lastName&#39;, you can see how we are duplicating more and more code which essentially does the same thing, updates one value in the store.Instead of this I created a re-usable action which I can update a single value in the Redux store with... And its as many lines of code as the fixed &#39;changeFirstName&#39; action I showed above.<pre><code>export function changeSingleReduxValue(newState, propertyName) {
  return { type: &#39;SINGLE_REDUX_VALUE&#39;, newState, propertyName };
}</code></pre> The only difference is we pass it a &#39;propertyName&#39; param aswell as the &#39;newState&#39;. We now need to update our Redux reducer too, so it can handle the &#39;propertyName&#39; param. Here&#39;s how it might look:<pre><code>export default function data(prevState = {}, action, propertyName) {

    switch (action.type) {
    case &#39;SINGLE_REDUX_VALUE&#39;:
      return assign({}, prevState, {
        [action.propertyName]: action.newState
 });

    default:
      return prevState;
 }

}</code></pre> If we called this twice with 2 different properties and values like this:<pre><code>this.props.dispatch(actions.changeSingleReduxValue(&#39;Harry&#39;, &#39;firstName&#39;));

this.props.dispatch(actions.changeSingleReduxValue(&#39;Jacks&#39;, &#39;lastName&#39;));</code></pre> Our Redux store would then look like this:<pre><code>{
    data: {
        firstName: &#39;Harry&#39;,
        lastName: &#39;Jacks&#39;
    }
}</code></pre>

Reusable redux action - update a single value

Wouldn&#39;t it be great if we could re-use a web application just with different colours and header and footer links, without a huge copy and paste of the entire repo. This is where webpack variables can come in. <h3>package.json commands</h3> Inside the scripts section of our package.json, we pass a variable to the command which we can re-use to conditionally load assets.<pre><code>{
  &#39;name&#39;: &#39;app-name&#39;,
  &#39;version&#39;: &#39;1.0.0&#39;,
  &#39;description&#39;: &#39;Application name&#39;,
  &#39;main&#39;: &#39;index.js&#39;,
  &#39;scripts&#39;: {
    &#39;build&#39;: &#39;webpack --config webpack.prod.js&#39;,
    &#39;start:red&#39;: &#39;cross-env THEME=red webpack-dev-server --hot --open --host 0.0.0.0 --port 3000 --config webpack.dev.js&#39;,
    &#39;start:blue&#39;: &#39;cross-env THEME=blue webpack-dev-server --hot --open --host 0.0.0.0 --port 3001 --config webpack.dev.js&#39;,
    &#39;test&#39;: &#39;jest&#39;
 },</code></pre> The important bits here are the start scripts i.e. &#39;start:red&#39; and &#39;start:blue&#39;. We would run them like this &#39;npm run start:red&#39; But first, we have to wire up our webpack to pass through the &#39;THEME&#39; flag. We do this inside our webpack file. I like to separate my dev and prod webpack files and use a webpack common file to use across both environments. So inside my webpack.dev.js file I need to firstly require webpack and also pass through &#39;THEME&#39; from the process environment:<pre><code>const webpack = require(&#39;webpack&#39;);

const THEME = JSON.stringify(process.env.THEME);</code></pre> Then we also need to add the global constant using webpack&#39;s awesome define plugin. Inside your module.exports add this to your plugins like this:<pre><code>plugins: [
  new webpack.DefinePlugin({
    THEME
  })
]</code></pre> Then, where we would normally import our css for the react app (probably in the index.js file), we can do this:<pre><code>if( THEME === &#39;red&#39; ) require(&#39;../scss/red_styles.scss&#39;); else require(&#39;../scss/blue_styles.scss&#39;);</code></pre> Instead of this:<pre><code>import &#39;../scss/app.scss&#39;;</code></pre> You can also take it a step further and use the value returned by &#39;THEME&#39; in the react render method to conditionally render different content like this:<pre><code>render() {
  return {
    &lt;div&gt;
      {( THEME === &#39;red&#39; ) ? &#39;Hello RED!&#39; : &#39;&#39;}
    &lt;/div&gt;
  }
}</code></pre>

Using Webpack variables to conditionally load assets in React

I&#39;ve been using Docker recently with a dev ops team on an authentication project whilst working with a UK bank. We are using multiple different micro services which work with a React front end. Each micro service is wrapped in its own docker container
and we use one docker-compose file to run the entire stack from the individual images.<h2>Create a Docker image</h2> Before we create a docker image, we need to create a dockerfile which we can create the Docker image from. Here are the commands that can exist in our Dockerfile: <h3>Create empty dockerfile</h3><pre><code>touch Dockerfile</code></pre> <h3>The Dockerfile</h3><pre><code>FROM (the base image we are creating the docker image from)

MAINTAINER (optional - The name of the image maintainer)

RUN (used to execute the command for building the docker image)

ADD (you can use a url to add a file to the destination directory)

ENV (sets the environment variable e.g. &#39;FROM node:8&#39;)

WORKDIR (creates the ap directory e.g. &#39;/usr/src/app&#39;)

EXPOSE (the port to expose e.g. 8080)

RUN (used to run commands before the build of the container e.g. &#39;npm install&#39;)
CMD (used to execute commands when creating the docker container e.g. [ &#39;npm&#39;, &#39;start&#39; ])</code></pre> Example dockerfile<pre><code>FROM node:8


# app directory
WORKDIR /usr/src/app

# Install app dependencies
RUN npm install

# If production
# RUN npm ci --only=production

# Bundle app source
COPY . .

EXPOSE 8080

CMD [ &#39;npm&#39;, &#39;start&#39; ]</code></pre> <h3>Build docker image from dockerfile</h3><pre><code>docker build -t NAME-OF-DOCKER-IMAGE .</code></pre><h3>List all docker images</h3><pre><code>docker images</code></pre><h3>Run docker image</h3><pre><code>docker run NAME-OF-DOCKER-IMAGE -p 80:80</code></pre><h3>Show all docker containers</h3><pre><code>docker ps</code></pre>

Docker commands

GIT is a code versioning tool which allows teams to work on projects at the same time.Firstly, open command prompt and locate your project directory. If git is already installed then the following commands can be run.<h3>Status</h3>This will tell you what changes have occurred.<pre><code>git status</code></pre><h3>Add</h3>Staging files which can then be committed to your local repo.<pre><code>// This will add individual files
git add myfile.js

// This will add all changed files
git add -A</code> </pre><h3>Commit</h3>Commit will commit all your locally staged changes to your local repo.<pre><code>git commit -m &#39;I made a change to something&#39;</code></pre><h3>Push</h3>Push is used to push your locally committed changes to the remote repo. You may be prompted for a username and password for the remote repo.<pre><code>git push origin branch</code></pre><h3>Branch</h3>Branch is used to display which branch you are currently working on.<pre><code>// which branch you are ongit branch
// Fetch a new branch
git fetch origin myBranch

// checkout one of the branches available
git checkout myBranch</code></pre> <h3>Undo a remote Commit</h3><pre><code>// revert the local checked out branch back to a commit.
git reset --hard ID-OF-COMMIT-TO-REVERT-TO
// force push to overwrite the repo branch with your remote one.
git push --force</code></pre><h3>Only merge certain files from another branch</h3><pre><code>// checkout the branch you want to pull file changes togit checkout branch1
// checkout JUST the file you wish to merge into branch1
git checkout branch2 src/filename.js

// check status to see the new file that is unstaged
git status

// then add and commit the new file change
git add -A git commit -m &#39;Added new file to branch1 from branch 2&#39;</code></pre>

GIT – Useful Commands

Something I want to do quite often is center a div horizontally and vertically but make it stay center no matter the size of screen it is being displayed on (laptop, mobile, tablet etc.)This can be achieved with a little piece of CSS.<h3>HTML</h3><pre><code>&lt;div class=&#39;loading-content&#39;&gt;
 &lt;h2&gt;Loading&lt;/h2&gt;
&lt;/div&gt;</code></pre><h3>CSS</h3><pre><code>.loading-content {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 width: 200px;
 height: 50px;
}</code></pre>

Center A Div Vertically and Horizontally

In this blog post I will explain how I installed MongoDB, setup a database and then used it in my Node JS project. Let&rsquo;s jump straight in!<h3>Install MongoDB and set Location</h3>First thing to do is download MongoDB from the <a href="https://www.mongodb.org/downloads">MongoDB site.</a> Once downloaded run the install and it should install to your program files. Take a copy of everything in the mongo folder and paste it into a location where you can get to it easily enough. I keep it in a folder called mongo in the C drive like this:<pre><code>&lsquo;c:/mongo&rsquo;</code></pre>so it is quick to access from command prompt (cmd). <h3>Install MongoDB NPM Module in NodeJS</h3>To install MongoDB into your node project and add it as a dependency in your package.json run this in cmd at your project location:<pre><code>npm install mongodb &ndash;save</code></pre> <h3>Create Database for your Node JS Project</h3>So I had a NodeJS project and I was able to serve up web pages using express etc etc. Then I wanted to be able to pass data from the client side to my Node server and save it to a database. To do this we must create the database! Open up cmd and navigate
to your mongo folder we just created in the C drive. once in this location in cmd, we need to navigate to the bin folder inside our mongo folder. (This is where all the program files for MongoDb live and we need to use them from here).Ensure you have a location for your Node JS app and create a folder in that location called &lsquo;data&rsquo;. Then from cmd we type:<pre><code>mongod &ndash;dbpath C:/NodeApplications/MyNodeApp/data</code></pre>and press enter. If you now go to your Node JS app folder you will see the data folder has some content inside it. Your cmd window has initiated the MongoDB and is listening for any connections to it. Leave that cmd window and open a new one. Navigate to C:/mongo/bin like before and run:<pre><code>mongo localhost:27017</code></pre>and hit enterThis opens a connection using the MongoDB Shell and connects to our database we opened in the other cmd window. The reason we use localhost:27017 is because that is where the MongoDB defaults to. The cmd window will now be connected to the
test database which is the default for MongoDB. To create a new database type:<pre><code>use MyDB</code></pre>This will create a database called &lsquo;MyDB and open it for us in cmd. From here we can add information, remove information etc. <h3>Add something to the database</h3>Once we have connected to our MongoDB and opened our database, we can insert rows like this:<pre><code>db.collection.insert({&ldquo;FirstName&rdquo; : &ldquo;Harry&rdquo;, &ldquo;LastName&rdquo; : &ldquo;Jacks&rdquo;</code></pre> <h3>Remove something from the database</h3>Similar to inserting a piece of data, we use:<pre><code>db.connection.remove({&ldquo;LastName&rdquo; : &ldquo;Jacks&rdquo;})</code></pre>This will remove all rows which LastName=Jacks.<h3>Setting up a Collection in a Database</h3>Once the database is open and accessed through MongoDB Shell, we can add a collection and do things with it. For example, the following example has connected to the localhost:27017..I run:<pre><code>use users</code></pre>This creates a users database.Then:<pre><code>coll=db.users</code></pre>This creates a users collection in my users database.Then:<pre><code>db.users.insert({&ldquo;FirstName&rdquo; : &ldquo;Michael&rdquo;, &ldquo;LastName&rdquo; : &ldquo;Jackson&rdquo;})</code></pre> This adds this row of data to my users collection.Then:<pre><code>coll.find()</code></pre>This will find all documents from within my users collection. Essentially this just means the items in my users collection in my users database.

How to Install MongoDB with a NodeJS project and use the MongoDB Shell (windows).

The following input field will only allow positive numbers and no letters or minus numbers. It basically says only keys 1 to 0 (1234567890) can be pressed on the keyboard. <pre><code>&lt;input type=&#39;number&#39; onkeypress=&#39;return event.charCode &gt;= 48 &amp;&amp; event.charCode &lt;= 57&#39; min=&#39;1&#39;&gt;</code></pre>

Prevent letters and negative numbers being added in an input field

To add an overlay with opacity on it, over a background image you don&rsquo;t need another div placed over it. You can simply do the following: <pre><code>.my_div {
 background: linear-gradient(rgba(56,69,79, 0.5), rgba(56,69,79, 0.5)), url(my_image.png);
}</code></pre>

Posts