Habit-System

💻 Learn Programming 📆 2023

✅ GitHub Contributions

image

January - May

June

Catching up with React 18

Ref vs State

Work Done

Learning Next.js

Next.js has two forms of pre-rendering:

Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

Client-side Rendering in Next.js

Server-side Rendering

// context contains request-specific parameters.
export async function getServerSideProps(context) {
  return {
    props: {
      // props for your component
    },
  };
}

Dynamic URLs: Next.js allows you to statically generate pages with paths that depend on external data, where each page path depends on external data.

image

Redux

/**
 * This is a reducer - a function that takes a current state value and an
 * action object describing "what happened", and returns a new state value.
 * A reducer's function signature is: (intialState, action) => newState
 *
 * The Redux state should contain only plain JS objects, arrays, and primitives.
 * The root state value is usually an object. It's important that you should
 * not mutate the state object, but return a new object if the state changes.
 *
 * You can use any conditional logic you want in a reducer. In this example,
 * we use a switch statement, but it's not required.
 */
function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

Redux-Saga

An intuitive Redux side effect manager.

Create a Saga

Generator Functions

The functionwith defines a generator function, which returns a Generator object. Generators functions can be exited and later re-entered. Their context (variable bindings) will be saved across re-entrances.

Yield

Yield operator is used to pause and resume a generator function. The yield keyword pauses generator function execution and the value of the expression following the yield keyword is returned to the generator’s caller.

Both call and put are effect-creator functions.

Call

Call is used to create effect description, which instructs middleware to call the promise. call() is a blocking effect, which means that the saga will wait for the promise resolving before moving on to the next step.

Put

Put creates an effect, which instructs middleware to dispatch an action to the store. put(), on the other hand, is a non-blocking effect, which means that the saga can continue to the next step and action will be dispatched within the internal scheduler.

takeEvery vs takeLatest

Creating the Redux Store and applying Middleware

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'

import reducer from './reducers'
import mySaga from './sagas'

// Create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// Mount it on the Store
const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

// Then run the saga
sagaMiddleware.run(mySaga)

Creating SAGA

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

// Worker saga will be fired on USER_FETCH_REQUESTED actions
function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

function* mySaga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}

Dispatch an Action

class UserComponent extends React.Component {
  ...
  onSomeButtonClicked() {
    const { userId, dispatch } = this.props
    dispatch({type: 'USER_FETCH_REQUESTED', payload: {userId}})
  }
  ...
}

July

TypeScript Revision

FreeCodeCamp Project

August

September

October

Accessible Unit Testing

ARIA

ARIA attributes aid us to make applications more accessible but the irony is that our code/HTML markup should be semantic enough in the first place so that we need not use/define ARIA exclusively. i.e. applications should be accessible by default.

November

December