react

by Greg on Coding

useState props

const [activeIndex, setActiveIndex] = useState(null);

Whenever you call useState in React, you get back two elements. The first value will always be its most recent state and the second value is the value you want to set state to.

The const above is called array destructuring and in our particular instance, it’s used to give us direct access to the first element (state) and second element (set state) of useState.

It shortcuts having to do the below:

const colors = ['red', 'green'];
const redColor = colors[0];
const greenColor = colors[1];

And you can shortcut the above by simply doing:

const [redColor, greenColor] = colors;

Which is assigning the first Element in colors, to the variable redColor and the second element in colors, to the variable greenColor.

There are three steps to setting state in Class Components and in Functional Components.

Class Component

// Initialize in the constructor
state = { activeIndex: 0 };

// Reference
this.state.activeIndex;

// Update
this.setState({ activeIndex: 5 });

Functional Component

// Initialize
const [activeIndex, setActiveIndex] = useState(0);

// Reference
activeIndex;

// Update
setActiveIndex(5);
 
by Greg on Coding

Redux Reducers

In my current self directed learning path about React, I’m wrapping my head around Redux and how it’s used to manage state.

In C# we have an Aggregate() method that takes in a collection and spits out a single value. For instance:

IEnumerable<int ints = new List<int> { 4, 8, 12, 16 };
int result = ints.Aggregate((sum, val) => sum + val);

Can you guess what the value of result is? If you guessed (or knew) 40, you’d be correct.

  • First iteration: 4 + 8, returns 12
  • Second iteration: 12 + 12 returns 24
  • Third iteration: 24 + 16 returns the final 40

With regard to state and where Redux comes in, reducers take in an initial state, and an action, to determine the new state. Redux helps us streamline keeping track of state, so that it’s consistent across our apps. The below code snippet is from a reducer I created called alert.js. The import on the first line is simply importing the SET_ALERT and REMOVE_ALERT constants from my types.js file.

I create another constant and set my initialState equal to an empty array. The reducer function takes two params, current state & action and returns a new state based on action.type and action.payload.

import { SET_ALERT, REMOVE_ALERT } from '../actions/types';

const initialState = [];

export default function (state = initialState, action) {
  const { type, payload } = action;
  switch (type) {
    case SET_ALERT:
      return [...state, payload];
    case REMOVE_ALERT:
      return state.filter((alert) => alert.id !== payload);
    default:
      return state;
  }
}

An action is an object that contains two key/value pairs, type & payload. In Redux Reducers, action.type is required and action.payload is optional.

A core tenet of Redux is that it should never mutate state, so you see the use of the spread operator ...state which makes state immutable.

 
by Greg on Coding

Stateful Components in React

I haven’t dove into state in functional components yet. But I am learning about state in class components.

When building a class in React, it’s helpful to extend (in C# we call this an override (inheritance)) React.Component. In order to pass arguments (props) to this class though, you must pass the props into the class constructor as well as into the parent (React.Component). That’s accomplished by using the super keyword.

The nice thing about state in a React class, is that it’s asynchronous out of the box. We can set off a task in the constructor and when you have a callback function that’s tied to this.setState, React will automatically recall the render method and update the state of that component. See my example below:

Screenshot of Visual Studio Code with some React code