What’s with Redux, ReduxSauce, Thunk, and Sagas?

What is Redux?

A library to create and manage data objects (aka state objects) based on the flux pattern.

Actions

Are requests to a store to take an action.

Example:
{ type: ADD_TODO, text: ‘Build my first Redux app’}

Action Types

An enum of allowable action types.

Reducers

Are handler functions for actions that apply the action payload.

myReducer = (state, action) => nextState

ReduxSauce

Is a library to make Redux more DRY. In doing so though, it makes the code less readable imo.

Thunk and Sagas

Calls to actions are synchronous. This means that action handlers cannot fetch data or have side effects. Thunk and Sagas solve this desire.

Reasons for: More powerful Redux can handle most of your biz logic
Reasons against: If not done carefully, you will end up with Redux spaghetti

Thunk

Thunk is an extended reducer which can (1) return a promise, and (2) actions are allowed to be called from within the promise (aka side-effects). For example, you can have an action which first sets a loading field = true in the store, fetches data, then updates the store when done.

Sagas

Sagas is like Thunk, but allows for action handling to be interrupted using generators

Further Reading

  • https://engineering.universe.com/what-is-redux-saga-c1252fc2f4d1

How to access object attributes based on a variable in Typescript

Typescript is obscurely particular with accessing attribute keys on objects that lack a generic signature. Adding generic signatures reduces type-safety though.

Here’s a Typescript-friendly way to verify an attribute exists in an object, and then access that attribute.

// implicitly typed object
const myObj = {
  Hello: "world"
};

const myObjKey = "Hello";

// The commonly recommended way to check if an attribute exists,  
// which throws a no signature lint error Element implicitly 
// has any type (TS7053) in Typescript
//
// if (myObj[myObjKey]) {
//     ...
// }

// The 'in' way, which Typescript likes
if (myObjKey in myObj) {
  // Now that we've confirmed the attribute exists, it's
  // type-safe to recast myObjKey and access it as an attribute
  console.log(myObj[myObjKey as keyof typeof myObj]);
}

This post originally posted at https://blog.smartlogic.io/accessing-object-attributes-based-on-a-variable-in-typescript/