Test Question

[i-mighty]

As much as possible, avoid making changes to the configurations of the projects.

This task is to ascertain your familiarity with the stack we would be using. Please feel free to ask questions. Also, it is not within our immediate plans to integrate the codes from this task into production now or at any time in the future. We would duly notify you if that would be the case.

The Task Create a simple tab with a QR Code on one side and a QRCode Scanner on the other.

• [ ] The string for the QRCode should be retrieved from the redux store. Add it and retrieve it yourself.
• [ ] The string received from your QRCode scanner should also be added to the redux store.
• [ ] Add a service that sends a POST request to a mock API.
• [ ] Write tests for your component and your store changes

Question

1. How do I create a race condition for tasks in redux-saga?
2. What are HOC and how would you use one?

Note Although there is no strict time limit to this task, It goes without saying that finishing quicker is a plus. When you are through, create a PR and post your answers to the questions in a comment in the PR. Feel free to ask questions if you are not clear.

[tundeLayan]

1. How do I create a race condition for tasks in redux-saga? We can do this by using the race effect combinator(race(effect)). Take, for instance, we want to run a race between two tasks, one to fetch users(fetchUsers() which will return a promise and an action(CANCEL_FETCH) to cancel the fetching. Here's an example: import { take, call, race } from redux-saga/effects import fetchUsers from './actions/fetchUsers'

function* fetchUsersSaga() { const { response, cancel } = yield race({ response: call(fetchUsers), cancel: take(CANCEL_FETCH) }) } Depending on which task resolves or rejects first, the losing effect is automatically cancelled by the middleware. i.e. if fetchUsers resolves or rejects first, the result of the race will be an object: {response: result(which could be the users or errors)}

2. What is HOC and how would you use one? An Higher order component is mostly useful for reusing component logic. It's concept is gotten from that of higher order functions(they take functions as input and return new ones). Same thing with HOC, they take in components and return new ones. We can use HOC's when we want to reuse component logic... both components do not have to have the same functions or even return the same results, but as long as the logic is the same.