Riduzione della piastra di riscaldamento redux-thunk

Question

Quando si scrivono le funzioni redux-thunk, note come thunk, è disponibile un numero di piastra che può essere facilmente estratto. Ad esempio nella maggior parte delle nostre chiamate API asincrone stiamo facendo quanto segue, senza effetti collaterali:

export const LOGIN_REQUEST = 'my-app/auth/LOGIN_REQUEST'; 
export const LOGIN_RECIEVE = 'my-app/auth/LOGIN_RECIEVE'; 
export const LOGIN_FAILURE = 'my-app/auth/LOGIN_FAILURE'; 

// ... reducer code here 

export function login(loginHandle, password) { 
    return (dispatch, getState, api) => { 
    dispatch({ type: LOGIN_REQUEST }); 

    api.post('/auth/login', { loginHandle, password }).then(
     response => dispatch({ type: LOGIN_RECIEVE, response }), 
     error => dispatch({ type: LOGIN_FAILURE, error }) 
    ); 
    }; 
} 

Facile! Anche se, come questo copre almeno il 70% delle nostre richieste sono sicuro che ci sia un modo elegante per astrarre assegnare di codice di cui sopra a qualcosa di simile (pseudo codice):

export function login(loginHandle, password) { 
    return (dispatch, getState, api) => api('POST', LOGIN_REQUEST, '/auth/login', { loginHandle, password }); 
} 

Quando abbiamo bisogno di controllare la stato e altri effetti collaterali possiamo tornare a un thunk adeguato. Anche se per la maggior parte dei casi ... potremmo abbatterlo?

Qualche idea elegante?

Answer 1

Redux Thunk consente di iniettare un argomento personalizzato dalla 2.1.0.

const api = createApi() // you would write this function 
const store = createStore(
    reducer, 
    applyMiddleware(thunk.withExtraArgument(api)) 
) 

// your action creator: 
function fetchUser(id) { 
    return (dispatch, getState, api) => { 
    // you can use api here 
    } 
} 

In futuro, se i tuoi thunk diventano troppo complicato, si potrebbe prendere in considerazione redux-saga o redux-observable.

Answer 2

Sfortunatamente, non esiste un modo comune nella comunità di redux per affrontare questo problema esatto. Personalmente ritengo che le persone non debbano temere di scrivere i propri wrapper personalizzati attorno a sé per risolvere esattamente queste situazioni.

Ho creato una libreria chiamata redux-tiles, che ha in realtà API quasi esatto che si desidera :) Per esempio, si codice sarà simile al seguente:

import { createTile } from 'redux-tiles'; 
const login = createTile({ 
    type: ['user', 'login'], 
    // params is an argument with which you call an action 
    fn: ({ api, params }) => api('POST', '/auth/login', params), 
}); 

Come si può vedere, non ci sono costanti qui , così come un riduttore. Queste cose vengono create automaticamente, quindi non devi farlo, così come testarlo. Ci sono altre funzionalità, come l'annidamento (quindi la stessa funzione verrà applicata per il recupero degli oggetti tramite ID, ad esempio, ma verrà aggiornata correttamente all'interno del riduttore) e la memorizzazione nella cache. È possibile effettuare il checkout degli esempi here.

Redux-saga è una buona cosa, ma è più se hai bisogno di una sorta di reattività, se hai bisogno di un approccio più tradizionale, solo un modo un po 'più conveniente per descrivere le tue azioni e combinarle, senza ripetersi , quindi trovo la mia libreria perfetta.