About my newly learned technology (Redux toolkit)

#javascript #react #redux #programming

At the start of the end-game, I was tasked with learning Redux. The difference between React and Redux was not clear to me for quite some time when I started learning React for the first time. First of all, let's talk about redux. Redux is an open-source JavaScript library for managing the application state. Usually is used with libraries like React or Angular for building user interfaces. This tool can be a means for cleaning up React applications. As a MERN stack developer, I use redux on react. Especially when I have a medium and large project with a lot of reducers and actions, I have probably already decided to keep the action types as constants in the strings using redux, which is a good approach.

Let's talk about my learning process. I checked the Redux documentation. It was pretty good, actually! For some reason, it just didn’t entirely click for me. I checked a bunch of YouTube videos as well. The ones I found just seemed rushed and not detailed. Then after some days on our course added an advance crash course about redux. Our instructor did a great class about redux. Still, I'm working on it.

I have taken into consideration my struggles. You did fall a few times, but that was okay. earning to walk also had a learning curve to it. However, with a systematic approach to learning, I overcame that.

Top comments (1)

Mark Erikson • Apr 14 '22 • Edited

Hi, I"m a Redux maintainer. Out of curiosity, any parts of our docs that you specifically feel "didn't click" for you? Any aspects of Redux you feel are particularly confusing?

FWIW, we would recommend against using separate action type string constants with Redux. That's part of the point of Redux Toolkit in the first place :) It still uses those inside, but you don't have to write them yourself.

Today a typical Redux reducer looks like this:

redux.js.org/tutorials/essentials/...

import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

DEV Community

About my newly learned technology (Redux toolkit)

Top comments (1)

Read next

Understanding 'Use strict' in JavaScript

Top 5 fastest growing JavaScript repos

Someone finally fixed Javascript

Creating a Planning Poker Demo app 🃏🕹️