Redux Thunk forklaret med eksempler

Redux Thunk er middleware, der giver dig mulighed for at returnere funktioner i stedet for kun handlinger inden for Redux. Dette giver mulighed for forsinkede handlinger, herunder arbejde med løfter.

Et af de vigtigste brugssager for denne mellemvare er til håndtering af handlinger, der muligvis ikke er synkron, f.eks. Ved hjælp af axios til at sende en GET-anmodning. Redux Thunk giver os mulighed for at sende disse handlinger asynkront og løse hvert løfte, der returneres.

Installation og opsætning

Redux Thunk kan installeres ved at køre npm install redux-thunk --saveeller yarn add redux-thunki kommandolinjen.

Fordi det er et Redux-værktøj, skal du også have Redux oprettet. Når det er installeret, er det aktiveret ved hjælp af applyMiddleware():

import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './reducers/index'; const store = createStore( rootReducer, applyMiddleware(thunk) );

Sådan bruges Redux Thunk

Når Redux Thunk er blevet installeret og inkluderet i dit projekt med applyMiddleware(thunk), kan du begynde at sende handlinger asynkront.

For eksempel er her en simpel forøgertæller:

const INCREMENT_COUNTER = 'INCREMENT_COUNTER'; function increment() { return { type: INCREMENT_COUNTER }; } function incrementAsync() { return dispatch => { setTimeout(() => { // You can invoke sync or async actions with `dispatch` dispatch(increment()); }, 1000); }; }

Og her er hvordan opsæt succes og fiasko handlinger efter afstemning af en API:

const GET_CURRENT_USER = 'GET_CURRENT_USER'; const GET_CURRENT_USER_SUCCESS = 'GET_CURRENT_USER_SUCCESS'; const GET_CURRENT_USER_FAILURE = 'GET_CURRENT_USER_FAILURE'; const getUser = () => { return (dispatch) => { //nameless functions // Initial action dispatched dispatch({ type: GET_CURRENT_USER }); // Return promise with success and failure actions return axios.get('/api/auth/user').then( user => dispatch({ type: GET_CURRENT_USER_SUCCESS, user }), err => dispatch({ type: GET_CURRENT_USER_FAILURE, err }) ); }; };

Mere information:

  • Sådan implementeres datapolling med React, Redux og Thunk
  • Sådan implementeres Redux i 24 linjer med JavaScript
  • Sådan tilsluttes Reager til Redux - en skematisk guide