DEV Community: asiddharth94

Introduction to Redux pattern

asiddharth94 — Tue, 15 Mar 2022 12:23:35 +0000

As the documentation reads - Redux is a predictable state container for JS apps .

Let's break this up -

predictable - Redux helps you write applications that behave consistently (we update the state using 'reducers', which are pure functions. We'll get to reducers later), run in different environments (client, server, and native). All state transitions are explicit and it is possible to keep track of them.
state container - Redux 'store' is an object which holds the whole global state of our app. And then, we can just get the values from the store to wherever we need in our app. Awesome! Right?
for JS apps - Redux can be used with vanilla JS or any JS framework. (People, No! It is not a React thing 😛)

Redux can be described in Three fundamental Principals -

Single source of truth - A fancy way of saying that we have one single big object that describes the entire state of the app. (Note - It is also a common pattern to keep only important state in Redux store while keeping UI specific state like form-inputs in component’s state)
State is read-only - The state is immutable. The only way to change the state is to emit an 'action'. (Don't worry, if you don't know what 'actions' are yet. Keep reading! You'll know! 🙂)
Changes using pure functions - We write pure reducers which takes in 'currentState' and an 'action', and returns the 'nextState'. (pure - given same input, the output is always same)

Cool! Let's get Coding!

An Action is a plain object which has two properties -
'type' (name of action: string)
'payload' (the value to be updated)

{
   type: 'add_todo',
   payload: 'learn redux'
}

A Reducer is a pure function that gets two arguments
(current/prev state & action) and returns the new state based on the action's type.

const reducer = (state={todo: [], otherValues: {}}, action) => {
  switch (action.type) {
    case "add_todo":
      return {
         ...state,
         todo: [...state.todo, action.payload]
      };
    default:
      return state;
  }
}

Next, store!

As we know, store is a single object which holds the complete global state of our app. Redux provides us with 'createStore' api to which we pass our reducer and that is it, we have our global state, i.e, the store.

import { createStore } from "redux";

let store = createStore(reducer);

Next, we need to subscribe to the store to listen when the store is updated and thus, update our UI accordingly.

store.subscribe(() => console.log(store.getState()));

Note - subscribe() is not the only way as different frameworks have different view binding libraries for this use case, e.g, react-redux.

Last thing! Now we know that our store can only be updated by dispatching actions! Let's do that! 🚀

store.dispatch({ type: "add_todo", payload: "learn redux" });

ANNNDDDDD, THAT IS IT ! YAY !

Here is a working link! 🙂

MORE -
As our app grows, we might need to have multiple reducers to manage different parts of our application's state.

The combineReducers() takes an object which has these multiple reducers and returns a single reducer which is a combination of all reducers passed to it. We can then pass this to createStore().

const rootReducer = combineReducers({
      one: reducerOne,
      two: reducerTwo
});

const store = createStore(rootReducer);

bind() polyfill - JavaScript

asiddharth94 — Sun, 06 Mar 2022 14:59:56 +0000

"Write your own 'bind' function" - pretty common in interviews, right?

Let me try to simplify it for you! 😃

Let's begin with the definitions -

The bind() method creates a new function that, when called, has its 'this' keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
Refer - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind
A polyfill is a piece of code (usually JavaScript on the Web) used to provide modern functionality on older browsers that do not natively support it.
Refer - https://developer.mozilla.org/en-US/docs/Glossary/Polyfill

Now, the fun and easy part. Implementation -

First things first, adding our 'myBind' to the prototype (to be able to use it on other functions, right?)

Function.prototype.myBind = function() {}

Now, one thing we know for sure is that the 'bind()' returns a function (copy of the function on which it was called). Let's do that with our own bind(), i.e, myBind()! One step at a time.

Function.prototype.myBind = function() {
    return function() {}
}

Next, as we know the '.bind()' returns a copy of the function on which it was called, let's get the caller function first with the this inside our '.myBind' function.

Function.prototype.myBind = function() {
    //'this' here will be the function on which 'myBind' was called
    var callerFunc = this;
    return function() {}
}

Now, we'll call the callerFunc in our returned function, because that is our ultimate goal, right?

I'm using the 'call' method because we need to set the this context in the callerFunc based on the arguments.

Function.prototype.myBind = function() {
    //'this' here will be the function on which 'myBind' was called
    var callerFunc = this;
    return function() {
        callerFunc.call();
    }
}

Next, the bind() method accepts a list of parameters. First one is the object to which the this refers in the returned copy function, followed by the function parameters.

So, let's get the arguments (using rest and spread syntax) and set the context in our myBind().

💡 Function.prototype.call() 's first arg is the this arg, followed by list of args.

Function.prototype.myBind = function(...args) {
    //'this' here will be the function on which 'myBind' was called
    var callerFunc = this;
    var thisArg = args[0];
    return function() {
        callerFunc.call(thisArg);
    }
}

Now we have the this context set properly, let's handle the next list of parameters, which myBind() might receive (optional params).

HOLD ON!!
We can get the remaining parameters (i.e, other than thisArg) passed to myBind() by using the slice method on our 'args' array.

var params = args.slice(1)

BUT, the 'params' is an array now and we can only pass comma separated values to our call() method. What to do?

Here comes, Function.protoype.apply() 🚀

The apply() method is similar to call(). Only difference is that it accepts argsArray[] as the second argument. Problem Solved!!! Let's do the changes.

Function.prototype.myBind = function(...args) {
    //'this' here will be the function on which 'myBind' was called
    var callerFunc = this;
    var thisArg = args[0];
    var params = args.slice(1);
    return function() {
        // using apply instead of call!
        callerFunc.apply(thisArg, params);
    }
}

Last step, we also need to take care of the arguments which might not be passed in the beginning to myBind() but instead, received when the returned function from myBind() is called.

Let's use the rest and spread and achieve our goal!

Function.prototype.myBind = function(...args) {
    //'this' here will be the function on which 'myBind' was called
    var callerFunc = this;
    var thisArg = args[0];
    var params = args.slice(1);
    return function(...remArgs) {
        // using apply instead of call!
        callerFunc.apply(thisArg, [...params, ...remArgs]);
    }
}

ANNNDDDDD, THAT IS IT ! YAY !

repeat() - JavaScript

asiddharth94 — Thu, 12 Mar 2020 12:46:41 +0000

The repeat() is called on a string which takes one argument (number of times the string needs to be repeated) and returns a new string , containing the repetitions of the string on which it was called (argument times), concatenated together.

Note - The argument passed must be non-negative and the new string formed must not overflow the maximum string size.

'#'.repeat(3) returns '###'