Late Night Tech

Previous Part (adding redux): http://dev.basharallabadi.com/2018/09/part-2-nutracker-reactjs-application.html By default the store only understands object dispatched actions, i.e. it won't support async calls out of the box neither functions, which conflicts with our need to call an api asynchronously and get the results and returns those results to our reducers to update the state. Redux Thunk The simplest approach to achieve what we need is to use something called middleware in redux that can pre process our actions and then proceed to the store when it's done. Redux thunk is a middleware library that knows how to handle a function received as a dispatched action from a component then based on the result it can dispatch more actions to the store to notify our reducers with the results. mainly we use it to process async calls and based on the result (success/fail) we ask it to dispatch the proper actions when. First lets update our foodRepo to actually call an a

In the first part we covered how to create components and how to interact with a mock api to get data for our application. all of that can be enough to build a react app but it won't scale well for the following reasons: 1- state will be all over the place  in different container components which means we have to add more layers of components to share common parts of states. 2- the propagation of events can be hard to deal with when the components tree gets deeper and other components (siblings and their children) will probably need to be notified of state changes. Redux data flow so there is a library called redux , and redux-react. this library in simple terms facilitates dispatching application wide events to specific handlers (reducers) that modify the state based on the actions they receive, it then store the whole state after those handlers change it and pass the new state to react framework to rerender our components. In short: it's an event publ

Part 1: from scratch Read the introduction in this part I'll be explaining the first commit, source code for that can be found here: https://github.com/blabadi/react-nutracker/tree/f3b998b6e4ba9d2cdeed15ce637066fac0647c1f Creating the project: run this command (this is using nodeJS binary) : npx create-react-app react-nutracker this will initialize the directories and we are ready to start adding our code. this is a command line tool created by react team to make initializing as easy as possible because it can be overwhelming for people to configure everything, let's focus on react for now and not the details that can be done later. see: https://github.com/facebook/create-react-app you can also start the application and it will work: npm start Install bootstrap npm install --save bootstrap import bootstrap in the index.js file. import 'bootstrap/dist/css/bootstrap.min.css'; The First NUtracker Component: Search box 1-  I added the follo

I worked before on learning angular 2+, and made a sample functioning app that tracks calories &  macros, called it NUtracker. For live running version (angular) : here . (buggy as it's just prototype, after registration set your profile goals first otherwise it will look broken). Main functionalities: - search for foods from a db - add new food to the db - add them as daily entries - calculate the total daily intake of calories, carbs, fats & protein with respect to the daily goals - users can set the goals in their profile screen. - login/registration screen. - move back and to see other days entries. - edit/remove entries Why? in this series of blogs I'll try to replicate this angular project in react, for two reasons: 1- get a sense of both framework and compare them to each other apple to apple. 2- apply what I learn about react & it's eco-system in a project and solve the problems I face. The main goal of this blo