Rusty Shanahan

Rusty Shanahan

1597257540

How I Finally Understood Redux

I have been in charge of setting up a new frontend at work for a new project. Initially I created a new React app using create-react-app, and decided to use React Context API for handling data in the app. I would fetch data when loading the page, save it a in a global state, and then populate it throughout the app using Context. This worked in the beginning, but I quickly realised that It got quite complicated handling a lot of data after a while. I also stored information about ui state in at a Context level, for things like if sidebars and navigation menus are open.

We also wanted to be able to listen to events sent by our backend API to then update state with new data throughout the app. Since we also didn’t store every entity at the Context level this got quite complicated. We started having multiple sources of truths and manually managing a lot of state updating. I decided to start looking towards Redux — a global state management tool I had been using at my previous job. I hadn’t had a lot of good experiences with it, and I was quite ___ towards actually taking a look at it again. However, I spun up a playground for trying it out, watched some tutorials, and hashed out some strategies. Here’s what I learned.

Redux is easier than we think

Redux has this sort of mist around it, as if it’s some sort of black magic library that only a subset of people in the frontend web development industry actually understand. I think we need to get rid of this assumption — since Redux is just a tool for lifting our data state to another layer in our application — away from our components.

Concepts

Redux have some concepts with naming that can be quite deceiving and sound more complicated than they actually are. These are the main concepts in Redux.

Store

The store is where all data is eventually going to be stored.

const store = createStore(reducers)

Reducer

The reducer is kind of the exchange point for the incoming actions.

switch (action.type) {
  case 'GET_TODOS':
    ...
  case 'CREATE_TODO:
    ...
  CASE 'PATCH_TODO':
    ...
  case 'DELETE_TODO':
    ...
}

Action

Actions are the triggers for fetching, patching, deleting and adding to state.

function createTodo(todo) {
  return {
    type: 'CREATE_TODO',
    payload: todo
  }
}

Full example

Let’s try a real example. I’m not going to build a simple counter app like every other Redux tutorial does, since it’s not very real case. Let’s build a todo app that actually updates data in a database, and uses Redux for its frontend data layer management. Let’s start by creating a new React app and installing some dependencies.

#web-development #redux #react #redux-thunk #javascript

What is GEEK

Buddha Community

How I Finally Understood Redux
Rusty Shanahan

Rusty Shanahan

1597257540

How I Finally Understood Redux

I have been in charge of setting up a new frontend at work for a new project. Initially I created a new React app using create-react-app, and decided to use React Context API for handling data in the app. I would fetch data when loading the page, save it a in a global state, and then populate it throughout the app using Context. This worked in the beginning, but I quickly realised that It got quite complicated handling a lot of data after a while. I also stored information about ui state in at a Context level, for things like if sidebars and navigation menus are open.

We also wanted to be able to listen to events sent by our backend API to then update state with new data throughout the app. Since we also didn’t store every entity at the Context level this got quite complicated. We started having multiple sources of truths and manually managing a lot of state updating. I decided to start looking towards Redux — a global state management tool I had been using at my previous job. I hadn’t had a lot of good experiences with it, and I was quite ___ towards actually taking a look at it again. However, I spun up a playground for trying it out, watched some tutorials, and hashed out some strategies. Here’s what I learned.

Redux is easier than we think

Redux has this sort of mist around it, as if it’s some sort of black magic library that only a subset of people in the frontend web development industry actually understand. I think we need to get rid of this assumption — since Redux is just a tool for lifting our data state to another layer in our application — away from our components.

Concepts

Redux have some concepts with naming that can be quite deceiving and sound more complicated than they actually are. These are the main concepts in Redux.

Store

The store is where all data is eventually going to be stored.

const store = createStore(reducers)

Reducer

The reducer is kind of the exchange point for the incoming actions.

switch (action.type) {
  case 'GET_TODOS':
    ...
  case 'CREATE_TODO:
    ...
  CASE 'PATCH_TODO':
    ...
  case 'DELETE_TODO':
    ...
}

Action

Actions are the triggers for fetching, patching, deleting and adding to state.

function createTodo(todo) {
  return {
    type: 'CREATE_TODO',
    payload: todo
  }
}

Full example

Let’s try a real example. I’m not going to build a simple counter app like every other Redux tutorial does, since it’s not very real case. Let’s build a todo app that actually updates data in a database, and uses Redux for its frontend data layer management. Let’s start by creating a new React app and installing some dependencies.

#web-development #redux #react #redux-thunk #javascript

Jordon Bergstrom

Jordon Bergstrom

1602991640

Reduce Redux Boilerplate Code with Redux-Actions

Redux has become one of the most popular libraries in front-end development since it was introduced by Dan Abramov and Andrew Clark in 2015. They designed it as the successor for Flux, with the support of some developer tools and a few more concepts embedded in it.

Flux is a fancy name for observer pattern further modified to support React. Both Flux and Redux consist of similar concepts like Store, Actions (events in the application). In other words, Flux is a simple JavaScript object but with some middleware like redux-thunk. It can be a function or a promise for Redux. However, Redux is a single source of truth with concepts like immutability, which improve performance. It is one of the main reasons for Redux to dominate in State Management.

Image for post

Flux vs Redux comparison source: enappd.com

Despite its advantages, some developers have found it rather challenging to deal with Redux due to the amount of boilerplate code introduced with it. And the complexity of the code seems to be another reason for the difficulty.

In this article, we will look at how to reduce the boilerplate code brought about by Actions and Reducers using Redux-Actions

#react-redux-boilerplate #react-redux #react #react-actions #redux

Jesus Moran

Jesus Moran

1622824320

Modern Redux with Redux Toolkit

Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. Mark Erikson (@acmemarke), long-time Redux maintainer and avid blogger about all things web development showed us the potential of Redux in action with an awesome demo!

Some handy links you might encounter in the video:
➡️ https://blog.isquaredsoftware.com/2021/01/context-redux-differences/
➡️ https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/
➡️ https://github.com/immerjs/immer

  • 00:00 - Intro
  • 00:25 - Meet Mark Erikson
  • 02:57 - Is Redux dead?
  • 06:25 - Redux is a jack of all trades
  • 09:00 - What makes the Modern Redux tick? v7.1, Hooks
  • 10:43 - useSelector hook
  • 11:31 - useDispatch
  • 13:23 - What is Redux ToolKit & what does it do?
  • 15:30 - configureStore
  • 17:00 - Immer
  • 18:25 - createReducer API
  • 19:19 - createAction
  • 19:57 - createSlice
  • 23:27 - createSelector
  • 23:40 - createAsyncThunk
  • 24:40 - createEntityAdapter
  • 26:43 - Redux Toolkit safety check
  • 28:20 - Redux Toolkit: RTK Query
  • 32:57 - App Setup
  • 34:05 - App Usage
  • 35:05 - Redux Templates for Create-React-App
  • 35:40 - Coding demo time! - Redux + TypeScrypt + Vite App Example
  • 47:28 - RTK Query Overview
  • 50:05 - New “Redux Essential” Tutorial
  • 51:35 - Outro

React All-Day is a long-format stream of fun and learning with React experts, and live coding from familiar names and faces from around the React world!

Eight awesome guests covered eight exciting topics from sessions on testing, data management, full-stack frameworks to programming concepts, and more.

React Wednesdays is a weekly chat show with the best and brightest from the React world. Join us live every Wednesdays to hang out and ask questions. Learn more about the show and upcoming episodes at https://www.telerik.com/react-wednesdays.

#redux #redux

Eldora Powlowski

Eldora Powlowski

1599144300

Let’s use redux in react

Redux is super simple to use. Actions are used to indicate what can be possible done to the states, reducers are used to indicate the transformation of the state, dispatch is used to execute the action and store is used to combine all together. Is it sounds like greek? let me explain in detail.

What is redux?

Redux is a state management library which can be used in React and it can be also used in Angular, Vue and even vanilla JavaScript. Apart from that Context API can be used as an alternative for Redux.

Why we need redux? can’t we use states and props? This is an additional burden.

Image for post

Let me explain, If sub component has its’ own states then it is not a problem to manage them. Then what if those data is needed for the sub component two. Then we have to do **state uplifting **and pass those data to the parent component as follows and pass them to the child component as props. Then it is still manageable.

Image for post

What if those data is needed for Component One and Component Two as well. Then we have to face the problem of **props drilling **as follows because we have to pass those data here and there using props and it become a burden.

Image for post

Then redux come to solve this issue by separating the data from components as follows.

#redux-reducer #react-redux #redux #react

Sidney Purdy

Sidney Purdy

1593513911

Use Yup with Redux-form

I wanted to replace Joiand Redux-Form with [Yup](https://github.com/jquense/yup)and [Formik](https://github.com/jaredpalmer/formik), respectively. “Now why would you want to do that!?”, you might ask. Well let’s quickly go through the reasons for Yup and Formik.

Why Yup

  1. Much lightweight than Joi.

And this is why ‘lightweight’ is important:

_tl;dr: less code = less parse/compile + less transfer + less to decompress _source

2. Easier to parse for error messages from returned error object.

3. Much flexible to customize error messages without string manipulation shenanigans.

4. Yup shares very much similar syntax and method names with Joi, making replacing Joi an easy task.

Why Formik

See “Why not Redux-Form?”

However, replacing redux-form with Formik was considered to me to be a heavier task than Joi with Yup, therefore here goes ‘your friendly’ medium article about it — the gist of making Yup plays well with redux-form.

First we create a validator function that will accepts our Yup schema later.

import { Schema } from 'yup';

const validator = <T>(schema: Schema<T>) => async formValues => {
  try {
    await schema.validate(formValues, { abortEarly: false })
    return {}
  } catch (errors) {
    return errors.inner.reduce(
      (errors, err) => ({
        ...errors,
        [err.path]: err.message
      }),
      {}
    )
  }
}

export default validator

#yup #redux-form-yup #react #redux-form #programming #redux