Notes

Step 1: Install Redux & react-redux, and redux-thunk npm install redux npm install react-redux npm install redux-thunk Step 2: Think about what states you want your store to have For my case, it was: 1 2 3 4 5 { streams: [{},{}] trades: [{},{}] globalNominalDenom: 'SGD' } Step 3: Taking stock of ways Database data and store data is interacted with There are three broad functions you’re trying to achieve, what I call, the right hand, left hand, and the reducers. Right hand is in charge of getting state from database. Left hand is in charge of ‘pushing’ state to store via dispatch. With the help of redux-thunk, you essentially combine these two functions together into the definition of action creators. ...

The hallmark of an experienced developer is his/her ability to foresee the errors and handle them appropriately. Below are some notes regarding how error handling is done in different contexts. Let’s first take a look at the general structure of error handling. Structure of error handling Within a .then().catch() block For instance, within a route, you want to find the noteById, and then do something. 1 2 3 4 5 6 Note.findById(id) .then(note => note) .catch(error => { console.log(error) response.status(500).end() }) Often times, when you’re making a request to the database, it’s unclear whether your request will succeed. If there is an error, you’ll need a .catch() block to handle the error. The catch block receives a callback function with error as argument - an error handler function - and you’ll then define how to handle this error. ...

Within Mongoose, it seems like when I make a put request, I only need to specify the property to update, and the resulting JSON will contain the original properties with only the targeted property changed. In other words, I do not need to specify the whole object to update. This is convenient. And also the desired behavior. I wonder if this is true across all put requests.

In part 1, we mainly looked at laying out the groundwork for the backend project, including setting up console logging (morgan), eslint, installing various dependencies, configuration for MongoDB connection, util files such as logger, creating the models I needed, coding the express app (app.js), and finally, populating the database with some initial data to work with. In this part, I’ll begin by documenting how I go about creating and testing the routes. Then, we’ll look at middleware and error handling. Finally, I’ll connect the frontend to the backend to make sure that all the data is being pulled correctly. ...

You’ve arrived at the moment where your project is getting serious and you need to begin coding some serious backend. This guide will get you started. Goal of Backend Restructure Goal of the development project is to get the backend to look like this: Backend architecture: Index.js App.js Routers: Streams Router Trades Router User Router Login Router Models Trades Model Streams Model User Model Utils Middleware Logger config.js Tests setting up test environment Laying the groundworks Step 1: Take stock of current project dependencies and structure Examine package.json to see what dependencies it currently have. Examine the project folder structure and files to check where is the backend mostly stored. For a simple express server, it is possible that all the routes, middleware, models, are stored in index.js. ...

Basic Idea of Multiple States Quite naturally, the store within Redux should be able to store multiple kinds of states. Consider the following state: 1 2 3 4 5 6 7 { notes: [ { content: 'reducer defines how redux store works', important: true, id: 1}, { content: 'state of store can contain any data', important: false, id: 2} ], filter: 'IMPORTANT' } On a top level, Redux architecture allows us access to a ‘global’ state. Each state is a property within the Redux store. ...

This is how to delete submodules fully, tried and tested. URL REF: Delete the relevant section from the .gitmodules file. Stage the .gitmodules changes git add .gitmodules Delete the relevant section from .git/config. Run git rm –cached path_to_submodule (no trailing slash). Run rm -rf .git/modules/path_to_submodule (no trailing- slash). Commit git commit -m “Removed submodule " Delete the now untracked submodule files rm -rf- path_to_submodule

Okay this will be a summary of very important concepts that I’ve learned, which is the Flux architecture. The core idea is this. There are three interconnected primitives within the flux architecture for state management. First, there is the reducer. A reducer is a function that takes in a state variable (similar to the ‘useState’ function), but in addition, also takes in an action variable. An action is simply an object that contains information regarding the user’s action, to be enacted on the state. A common definition within action object is the action.type property. ...

Wow just from exercise 4.7 from FullStackOpen I’ve learned 3 very important and useful things within a one line solution. This is the solution in question: 1 2 3 Object.entries(_.countBy(blogs, 'author')).sort((a,b) => { return b[1] - a[1] })[0] It took me several hours to figure out this exercise. This is because first I needed to get myself introduced to Lodash - and then, I got introduced to Object.entries, a way to convert an object into an array. Next, I needed to figure out how sort() works. Overall….I feel quite accomplished. But I’ll just need to document everything I’ve learned from this exercise below. ...

I feel like there is a lot to take in for this part. Whilst in the last part, all of the backend logic was basically stored in index.js, now we’ve refactored each portion into their own separate modules. Indeed, I can see how this could be an overkill for smaller apps, but for more complex projects, it would certainly ‘make developing the app much easier’. Let’s take a look at how that is done, line by line. ...