22'

Simplifier Redux avec Redux-Zap ⚡

Godefroy de Compreignac

Vous connaissez Redux

(Sinon vous risquez de vous faire bien chier pendant 22 min)

Action

Reducer

Store

UI

dispatch

subscribe

emit new state

apply

Redux

Les hooks et les typings de react-redux ont bien amélioré le développement côté composants

Côté actions et reducers,
c'est souvent plus compliqué.

 

On a besoin de rajouter des middlewares et d'écrire beaucoup de boilerplate.

On utilise souvent :

  • @reduxjs/toolkit
  • redux-thunk
  • redux-saga

 

Mais on sent que c'est vite compliqué pour pas grand chose.

Redux

Action

Reducer

Store

UI

dispatch

subscribe

emit new state

apply

Lots of

boilerplate code

Redux est puissant

mais verbeux

Et ça peut vite

vous péter à la gueule

  • Typage compliqué entre les actions et reducers
  • Reducers non utilisés difficilement identifiés
  • Actions asynchrones bancales

La plupart du temps, on écrit un cas de reducer par action creator, et on s'arrange pour les ranger au même endroit.

Alors pourquoi ne pas, la plupart du temps, combiner les deux directement ?

- Tu vas pas nous commettre une hérésie là ?

- Oui, et alors ?

Les objectifs de redux-zap :

 

  • Code plus simple
  • Respect du principe d'immutabilité
  • Asynchronicité par défaut
  • Pas de dépendances autres que redux et redux-thunk
  • Typage complet avec inférence maximum
  • Utilisation progressive / partielle

Je vais vous montrer comment j'ai procédé...

 

Pour concevoir redux-zap,
j'ai d'abord écrit une webapp de test
avec le store écrit comme j'aimerais qu'on puisse l'écrire.

On crée un fichier counter.ts
qui contiendra le store "counter"

Partons d'un state,

après tout c'est de cela qu'il s'agit

interface State {
  readonly count: number
  readonly counting: boolean
}
 
const initialState: State = {
  count: 0,
  counting: false
}

Qu'est-ce que fait une action en général ?

 

  • Effets de bord (appel API...)
  • Modification(s) partielle d'un state avec dispatch
  • Eventuellement de manière asynchrone

On modifie rarement un state entièrement, contentons-nous d'émettre un state partiel.

Cas simple :

1 modification partielle du state

const reset = () => ({ count: 0 })

 

1 effet de bord + 1 modification partielle du state

const reset = () => {
  log('reset') // Effet de bord
  return { count: 0 } // State partiel
}

Avec 1 argument :

const increment = (n: number) => state => ({ count: state.count + n })

On a besoin du state au moment de l'exécution de l'action, faisons en sorte de l'obtenir dans l'argument d'une fonction

Et pour faire une action asynchrone qui émet plusieurs modifications partielles de state ?

Il existe une syntaxe JS idéale pour ça.

Les générateurs asynchrones

Un générateur asynchrone est une fonction asynchrone qui peut émettre plusieurs valeurs (iterator)

async function *doStuff() {
  console.log('Reset counter')
  yield 0

  console.log('Wait for 1s')
  await new Promise(resolve => setTimeout(resolve, 1000))

  console.log('Set counter to 1')
  yield 1
}

for await (const value of doStuff()) {
  console.log('Value', value)
}

Résultat dans la

console de Chrome :

Imaginons donc une action asynchrone qui puisse émettre plusieurs states partiels

async *incrementAsync() {
  yield { count: 0 }
  await new Promise(resolve => setTimeout(resolve, 1000))
  yield { count: 1 }
}

On va vite avoir besoin du state courant.

Pour cela on pourrait :
 

  • Passer le state en argument, mais il ne serait vite plus à jour si on réalise des opérations asynchrones

  • Passer une fonction getState en argument, mais ça polluerait les arguments de l'action

ou alors...

 

  • À la place du state partiel, pouvoir émettre une fonction qui accepte un state en argument et qui retourne un state partiel.
  • Accéder au state initial (à l'exécution de l'action)
    par this
    ⚠ à éviter dans la mesure du possible
     
async *incrementAsync() {
  // State à l'exécution de l'action
  console.log('Previous count:', this.count)

  // Reset
  yield { count: 0 }
  
  // Appel asynchrone
  await new Promise(resolve => setTimeout(resolve, 1000))
  
  // Increment
  yield state => { count: state.count + 1 }
}

La plupart des cas sont

maintenant couverts.

 

Maintenant comment

on assemble tout ça ?

Du typing pour représenter nos actions :

type StateTransform<State> = Partial<State> | ((state: State) => Partial<State>)
 
type Zap<State, Params extends []> = (
  this: State,
  ...params: Params
) => StateTransform<State> | AsyncIterableIterator<StateTransform<State>>

On s'est tellement éloigné de la forme classique des actions que j'appelle ça maintenant des "zaps".

Ensuite il nous faut un moyen pour assembler le state initial et les zaps,

avec pour objectifs :

 

  • Inférer au maximum les types
  • Obtenir un reducer
  • Obtenir un type de state
  • Obtenir des actions redux

Imaginons donc une fonction qu'on pourrait appeler comme ça :

export default prepareStore(initialState, zapsMap)

Ce sera la seule fonction qu'on aura besoin d'importer de redux-zap pour préparer un store.

 

Pour pouvoir profiter de l'inférence dans les zaps, il est préférable d'écrire les zaps directement dans l'appel de la fonction.

import { prepareStore } from 'redux-zap'
 
interface State {
  readonly count: number
  readonly counting: boolean
}
 
const initialState: State = {
  count: 0,
  counting: false
}
 
export default prepareStore(initialState, {
  reset: () => ({ count: 0 }),
  increment: () => state => ({ count: state.count + 1 }),
  decrement: (n: number) => state => ({ count: state.count - n }),
 
  async *incrementAsync() {
    console.log('count', this.count)
    yield { counting: true }
    for (let i = 1; i <= 5; i++) {
      yield state => ({ count: state.count + 1 })
      await new Promise(resolve => setTimeout(resolve, 500))
    }
    yield { counting: false }
  }
})

store/counter.ts

Peu importe ce que renvoie exactement prepareStore, tant que je puisse le combiner avec les autres stores pour obtenir des reducers, des actions, et un state initial utilisable pour redux :

import { combineStores } from 'redux-zap'
import { applyMiddleware, combineReducers, createStore } from 'redux'
import thunk from 'redux-thunk'
import counter from './counter'
import pokemons from './pokemons'
 
export const { reducers, actions, initialState } = combineStores({
  // Prepared stores
  counter,
  pokemons 
})
 
// Obtain and export full type of the root state
export type RootState = typeof initialState
 
export default createStore(combineReducers(reducers), applyMiddleware(thunk))

store/index.ts

À l'usage, aucune différence avec du redux classique, si ce n'est que les actions sont regroupées dans un objet actions :

import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { actions, RootState } from '../store'
 
const { reset, increment, incrementAsync, decrement } = actions.counter
 
export default function Counter() {
  const { count, counting } = useSelector((state: RootState) => state.counter)
  const dispatch = useDispatch()
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => dispatch(reset())}>✖</button>
      <button onClick={() => dispatch(decrement(3))}>➖3</button>
      <button onClick={() => dispatch(decrement(1))}>➖</button>
      <button onClick={() => dispatch(increment())}>➕</button>
      <button onClick={() => dispatch(incrementAsync())}>➕5{counting && '⏳'}</button>
    </div>
  )
}

components/Counter.tsx

OK, j'ai écrit mon app comme j'aimerais pouvoir l'écrire, maintenant il faut de la magie derrière pour que ça marche

Le trick, c'est de stocker

le StateTransform

(state partiel ou fonction qui renvoie un state partiel)

dans l'objet d'action transmis aux reducer, qui n'a alors plus qu'à l'appliquer

Le reducer n'a alors plus qu'à appliquer le state partiel au state actuel pour obtenir et renvoyer un nouveau state.

 

C'est sale, mais ça marche !

Action

with state transform

Zap

to action

Store

State transform

Reducer

dispatch

dispatch zap

apply

Redux-zap

Le code de redux-zap est très simple, léger et performant

 

100 lignes de code

150 lignes de types

Ce n'est pas parfait, il manque par exemple la possibilité d'intercepter des actions d'autres reducers.

 

Mais ça couvre 99% des cas d'usage, et pour le reste on peut écrire des actions/reducers classiques.

import { prepareStore } from 'redux-zap'
 
const initialState = {
  count: 0,
  counting: false
}
 
export default prepareStore(initialState, {
  reset: () => ({ count: 0 }),
  increment: () => state => ({ count: state.count + 1 }),
  decrement: (n) => state => ({ count: state.count - n }),
 
  async *incrementAsync() {
    console.log('count', this.count)
    yield { counting: true }
    for (let i = 1; i <= 5; i++) {
      yield state => ({ count: state.count + 1 })
      await new Promise(resolve => setTimeout(resolve, 500))
    }
    yield { counting: false }
  }
})
const initialState = {
  count: 0,
  counting: false
}

// Actions
export const reset = () => ({ type: 'COUNTER_RESET' })
export const increment = () => ({ type: 'COUNTER_INCREMENT' })
export const decrement = (n) => ({ type: 'COUNTER_DECREMENT', n })
export const setCounting = (counting) => ({ type: 'COUNTER_COUNTING', counting })

export function incrementAsync(n) {
  return async (dispatch, getState) => {
    console.log('initial count', getState().count)
    dispatch(setCounting(true))
    for (let i = 1; i <= n; i++) {
      yield state => ({ count: state.count + 1 })
      dispatch(increment())
      await new Promise(resolve => setTimeout(resolve, 500))
    }
    dispatch(setCounting(false))
  }
}

// Reducer
export default function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'COUNTER_RESET':
      return { ...state, count: 0 }
    case 'COUNTER_INCREMENT':
      return { ...state, count: state.count + 1 }
    case 'COUNTER_DECREMENT':
      return { ...state, count: state.count - action.n }
    case 'COUNTER_COUNTING':
      return { ...state, counting: action.counting }
    default:
      return state
  }
}

Avec redux-thunk

Avec redux-zap

🡴 Sans typings, sinon ça serait encore plus long...

Demo

(s'il reste du temps)

C'est tout

pour aujourd'hui 🧡

Github : https://github.com/lonestone/redux-zap

NPM : https://www.npmjs.com/package/redux-zap

Medium : https://medium.com/lone-stone/simplify-your-redux-stores-with-redux-zap-b997bd70f380

Godefroy de Compreignac

Twitter : @Godefroy