g-marcin-journal

fig 1.1 redux-principles; <source: Tomasz Ducin presentation on frontend architecture>        Hi, in this blog post I’d like to introduce you to redux which is complex state management tool for web applications. I will describe it from a react point of view but it may be used with other frontend frameworks as well. Redux is recommended to be implemented using redux-toolkit - a set of utilities which facilitate developer experience during redux logic implementation. One of redux-toolkit authors is Marc Ericsson (that guy with simpson avatar) To begin with we need to install three packages: react-redux, @types/react-redux and @reduxjs/toolkit. The next step is to create store. Store instance is initialized with configureStore({reducer:{<import your 1st reducer and put its name here!>}) utility. It is also a good location to declare types for rootState(may be called App state) which is main representation of the application state and dispatch. The following snip

     fig 1.1 react-context scheme ---------------------------------------------------------------------      One of the way of sharing/transporting data between react components is context . In comparison to props drilling it doesn’t require you to pass the data through all of components until you reach the desired one. Context allow you to describe the data in single place and get it in another. Lets look into how we can apply context to our react app… At first it is good to create /contexts folder in as a subfolder to /src folder. This will be location of all of the future contexts as there can be more than one context per app. The next step is to create the .jsx / .tsx file and create an instance of context by assigning a createContext() function call to a variable. createContext function require to pass defult value of the context which will be used in case user will not specify the context value.. Please be advised that it should be done out of the function component –

fig 1.1 smart-dumb scheme In this post I want to take a look at organization of components in web applications. During designing new parts of web application we may follow simple concept  of  smart and dumb  components. The aliases for above are  fat and skinny  components or  presentational and container  components. Smart componetns contain the core logic of the application including querying database, fetching external resources or utilizing third-party libraries. It does not care about redux. This information is often contained within state and passed to the other parts of application via  props drilling  or by the means of  context . There are few smart components within application. They mostly come as a single instances across the app. On the other hand – dumb components recieve and display data recieved from smart component. They may contain some logic including state but it has only applied in the context of dumb component eg. It is strictly conected with display features of t

  fig 1.1 git rebase scheme<atlassian.com> This post is about git rebase command. Rebase along with merge is a way to join main branch and feature branch. Merge is about forward moving change record. On the other hand rebase comes with amazing history re-writing features. In simple words rebase operation is about moving or combining a sequence of commits to a new base commit. To rebase current branch simply type rebase and put a commit_id as an argument. #git rebase <base commit id> . Changing a base of your branch looks as if you started this branch from totally different commit than origin. Under the hood git creates whole new commits and apply them to base commit specified within command. Let’s make it clear the branch starts from a different commit looks the same but contains brand new commits. It may look senseless but rebase have crutial meaning if it comes to maintain a linear commits history within your repo. One good example of git rebase application is the follow