Connect Gitlab with VS Code

Summary

  • Use the gitlab workflow extension and add an account to it.
  • Before that, create the full access token in gitlab.


1st Step

Creating SSH keys

You need to create SSH key pair and you need to configure that public key in the gitLab



You can create the SSH keys in your machine, In linux you can create it by


SSh-keygen


Default it will generate an RSA key pair.



By default the shh key will stored in .ssh directory


First one is the private key.

Second one you see is the public key.


Private key you can not share is in your local system.

.

So we need to copay the public key and update it in gitlab.


 



2 Step

Adding and configuration of GitLabWorkFlow Extention into VSCode


Two ways to do it



Press shift command p open menu and select Add Account and ad git lab

Add your host url and token.




All done!!


Lets check all the available command in gitlab


Press shift command p open menu 


Some React Native Daily Tips

 Some helpful commands

  1. Clear watchman watches:

watchman watch-del-all


  1. Delete node_modules:

rm -rf node_modules and run yarn install


  1. Reset Metro's cache:

yarn start --reset-cache


  1. Remove the cache:

rm -rf /tmp/metro-*


What is Redux Thunk? Why we need it?

Redux is a popular state management library used in many web and mobile applications. It's a predictable state container for JavaScript apps that helps in managing the state of the application. However, when it comes to handling asynchronous actions like API calls or handling side effects, Redux alone is not enough. This is where Redux Thunk comes into play.

Redux Thunk is a middleware for Redux that allows you to write asynchronous logic that interacts with the Redux store. In this article, we will explore what Redux Thunk is, why we need it, and how to use it in a Redux application.

What is Redux Thunk?

Redux Thunk is a middleware that allows you to write asynchronous logic that interacts with the Redux store. It enables you to write action creators that return a function instead of an action object. This function can then dispatch actions and perform asynchronous operations before dispatching the actual action.

Why do we need Redux Thunk?

Redux follows a strict pattern of "dispatching an action that triggers a state change." However, this pattern is not enough when it comes to handling asynchronous operations. Let's consider an example where we need to fetch some data from an API before dispatching an action to update the state.

Without Redux Thunk, we would have to write a separate action creator for each step of the process. One action creator to initiate the API request, another to handle the response, and yet another to dispatch the actual action. This can become messy and difficult to manage, especially when dealing with complex operations.

Redux Thunk simplifies this process by allowing us to write a single action creator that can perform multiple tasks asynchronously before dispatching the actual action.

How to use Redux Thunk in a Redux application?

To use Redux Thunk in your Redux application, you first need to install the redux-thunk middleware using npm or yarn:

npm install redux-thunk

or

csharp
yarn add redux-thunk

Next, you need to apply the middleware to your Redux store using the applyMiddleware function from the redux package:

javascript
import { createStore, applyMiddleware } from 'redux';
 import thunk from 'redux-thunk'
import rootReducer from './reducers'
 const store = createStore(rootReducer, applyMiddleware(thunk));

In this example, we import the createStore and applyMiddleware functions from the redux package, as well as the thunk middleware from redux-thunk. We then apply the middleware to our store using the applyMiddleware function.

Now that we have added the redux-thunk middleware to our store, we can write action creators that return a function instead of an action object. Let's consider an example where we need to fetch some data from an API before dispatching an action to update the state.

javascript
export const fetchUserData = (userId) => {  
return (dispatch) => {  
dispatch({ type: 'FETCH_USER_DATA_REQUEST' }); 
fetch(`https://jsonplaceholder.typicode.com/users/${userId}`) .then((response) => response.json()) .then((data) => {  
dispatch({ type: 'FETCH_USER_DATA_SUCCESS', payload: data }); }) .catch((error) => {  
dispatch({ type: 'FETCH_USER_DATA_FAILURE', payload: error }); }); }; };

In this example, we define an action creator called fetchUserData that takes a userId parameter. This action creator returns a function that takes a dispatch parameter.

Inside the function, we dispatch an action to indicate that we are initiating the API request. We then use the fetch function to make the API request and handle the response in a promise chain.

If the request is successful, we dispatch another action