The Learning Never Stops

When I set out to finish my final project for the Flatiron School, I knew that I needed to use React and Redux. There was a wave of relief when I finally put together a project that worked. Yet as I went through my project review, I realized that what I put together was less elegant than hoped and less organized than planned.

The beauty in going through a “final project” is understanding that it was not the end of my journey, but rather the beginning.

First Redux

In a nutshell, plain Redux helps apps manage state by providing a centralized store that holds all states within the app. The Redux store helps eliminate the issue of passing props around the component tree.

As a refresher, the Redux flow goes:

1. User interaction with View triggers a state update
2. View dispatches an action
3. Reducers receive the action and update the state in the “store”.
4. The View subscribes to the “store” and receives changes in state.
5. The view updates the UI accordingly.

Image from http://thewebstop.blogspot.com/2017/07/learning-basics-reactjs-and-redux.html

At its core, Redux has 3 main components of: Actions, Reducers and Store.

Acitons are JS objects that have a required type property. They help determine what happened to state. Type is a string and describes the action.

{ type: ‘ADD_TODO’, text: ‘My new todo’ }

Reducers are pure functions. This means they’ll take the current value of state, carry out actions as instructed by action and then output a new value of state. Ultimately, Reducers change the value of state as seen below.

function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'INCREASE':
     return { value: state.value + 1 }
     case 'DECREASE':
      return { value: state.value - 1 }
    default:
      return state
  }
}

State is updated and stored in the Store. Components must be subscribed to the store to listen for state updates.

Enter Redux Toolkit

The initial challenge for a new engineer was that there was so much boilerplate code needed to get my Redux store up and running. The actions and reducers even for a simple project were complex and dreaming up bigger projects became daunting. The Redux team created the Redux Toolkit to alleviate some of these issues and helped this new engineer see the value in simpler, faster and cleaner Redux code.

The initializations are straightforward, but the beauty comes when creating a slice of “store” to use in the createSlice. It becomes a combination of the reducers and actions in a single more concise file.

import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increase: state => {
      state.value += 1
    },
    decrease: state => {
      state.value -= 1
    }
  }
})
export const { increase, decrease } = counterSlice.actions
export default counterSlice.reducer

The above code is much cleaner and simpler and eliminates the ugly switch statements to manage actions.

There’s also an ability to change the state’s value in the reducer vs. returning a new value to update the state.

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '.counterSlice' 
export default configureStore({
  reducer: {
    counter: counterReducer 
  }
})

Importing the reducer also becomes more straightforward.

Hooks

The beauty of Redux Toolkit is that you can also use the useDispatch and useSelector hooks to dispatch actions and read date from the store.

import { useSelector, useDispatch } from 'react-redux'
import { decrease, increase } from './counterSlice'

We can then initialize our hooks and return the UI elements that are triggered.

export function Counter() {
  const count = useSelector(state => state.counter.value)
  const dispatch = useDispatch()
  return (
    <div>
        <button onClick={() => dispatch(increase())}>
          Increase
        </button>
        <p>{count}<p>
        <button onClick={() => dispatch(decrease())}>
          Decrease
        </button>
    </div>
  )
}

Redux Toolkit is a glimpse into the wonderful world of continuous improvement. Each time you learn something new, it can complement what you already know and extend your knowledge. Don’t think of a project as an end to your learning, but rather just the beginning. Happy coding!