Redux on Aamnah - Frontend Web Developer

Redux folder structure patterns

Sat, 01 Aug 2020 00:00:00 +0000

The original cruft

a store folder with separate actions and reducers folder inside.

src
└── store
    ├── actions
    │   ├── activity.ts
    │   ├── conversations.ts
    │   ├── index.ts
    │   ├── report.ts
    │   └── search.ts
    ├── index.ts
    └── reducers
        ├── activity.ts
        ├── conversations.ts
        ├── index.ts
        ├── report.ts
        └── search.ts

src
├── components
│   ├── Activity.tsx
│   ├── Conversations.tsx
│   ├── index.ts
│   ├── Report.tsx
│   └── Search.tsx
└── store
    ├── actions
    │   ├── activity.ts
    │   ├── conversations.ts
    │   ├── index.ts
    │   ├── report.ts
    │   └── search.ts
    ├── index.ts
    └── reducers
        ├── activity.ts
        ├── conversations.ts
        ├── index.ts
        ├── report.ts
        └── search.ts

The Redux toolkit

Feature based: one folder for one feature

Following is based on the offical Redux template for Create React App

Plain Redux vs. Redux Toolkit - Code comparison

Sat, 01 Aug 2020 00:00:00 +0500

The official Redux template for Create React App includes @reduxjs/toolkit from the get go

1npx create-react-app my-app --template redux

createReducer
createAction
createSlice
createSelector

Store

1import { createStore } from 'redux'
2
3const reducer = (state, action) => {
4  return state
5}
6
7const store = createStore(reducer)

1import { Provider } from 'react-redux'
2
3ReactDOM.render(
4  <Provider store={store}>
5    <App />
6  </Provider>,
7  document.getElementById('root'),
8)

with Redux Toolkit

1import { configureStore } from '@reduxjs/toolkit'
2
3import rootReducer from './reducers'
4
5const store = configureStore({ reducer: rootReducer })
6// The store now has redux-thunk added and the Redux DevTools Extension is turned on

Reducers

Plain redux

 1const initialState = { value: 0 }
 2
 3function counterReducer(state = initialState, action) {
 4  // Check to see if the reducer cares about this action
 5  if (action.type === 'counter/increment') {
 6    // If so, make a copy of `state`
 7    return {
 8      ...state,
 9      // and update the copy with the new value
10      value: state.value + 1,
11    }
12  }
13  // otherwise return the existing state unchanged
14  return state
15}

 1function counterReducer(state = 0, action) {
 2  switch (action.type) {
 3    case 'increment':
 4      return state + action.payload
 5    case 'decrement':
 6      return state - action.payload
 7    default:
 8      return state
 9  }
10}

Redux toolkit

Creating a ToDo app using Redux Toolkit and React Redux Hooks

Sun, 29 Dec 2019 11:40:09 +0500

The APIs we’re gonna use

@reduxjs/toolkit has these 4 functions to make your dev life easier

1configureStore() // wraps createStore() + DevTools + Middleware (redux-thunk)
2createAction() // Creates an Action creator by taking an action type. Generated function takes a single argument that becomes action.payload
3createReducer() // Creates a reducer function
4createSlice()

And react-redux has these 2 hooks that we’ll use

1useSelector() // lets you extract data from the Redux store state, using a selector function
2useDispatch() // lets you dispatch Actions

And in React we’ll use hooks too

Modern React Redux in 2020 with Hooks and Toolkit

Fri, 27 Dec 2019 13:47:08 +0500

If you’re new to Redux, i highly suggest you start with using Redux Toolkit (@reduxjs/toolkit). This makes things simple and takes away a lot of boilerplate. If you then want to understand what is happening under the hood, or having difficulty understanding a particular Redux concept, only then go to the original Redux docs and figure out the details.

Hooks: useSelector() and useDispatch() (react-redux v7.1.0+. Previously you had to wrap your components in connect())
Redux Toolkit: createSlice(), createAction(), configureStore()

Redux Toolkit is just Redux with opinions and helper functions

Getting started with Redux Saga

Mon, 09 Dec 2019 23:36:22 +0500

You can not make API calls (or any other side effects) inside the reducers. For that you must use middleware. Redux Saga is one such middleware, which is good for

async things like data fetching
impure things like accessing browser cache

Generator functions

Redux Saga uses Generator functions, an ES6 feature.

With ES6 generators, we have a different kind of function, which may be paused in the middle, one or many times, and resumed later, allowing other code to run during these paused periods.

The case for Redux

Tue, 03 Dec 2019 00:00:00 +0500

Why Redux? In no particular order

Redux has DevTools
Redux has react-native-debugger for React Native
Redux has been around since 2015, has been stable, and is battle tested for heavy state
Redux is probably used in all legacy applications (i.e. anything before 2018..) and you’ll probably have to maintain that code
Redux is not just React. It works in other places too, like Angular..

Why not?

Very verbose
With React Suspense and useReducer you can get the middleware functionality like making API calls and the actions and dispatch() inside React by default
You can get DevTools for React’s built-in state in a (hacky workaround) way

Troubleshooting Redux

Mon, 11 Jan 2016 00:00:00 +0500

Troubleshooting Redux

State is not updating

Make sure you are not mutating your state in any of the reducers

Actions not dispatching

Make sure you’re adding this.props before the action you want to dispatch.

State is not showing

This happens when you