Redux Thunk este un middleware care vă permite să returnați funcții, mai degrabă decât acțiuni, în cadrul Redux. Acest lucru permite acțiuni întârziate, inclusiv lucrul cu promisiuni.

Unul dintre principalele cazuri de utilizare a acestui middleware este pentru gestionarea acțiunilor care ar putea să nu fie sincrone, de exemplu, utilizarea axios pentru a trimite o cerere GET. Redux Thunk ne permite să trimitem acțiunile în mod asincron și să rezolvăm fiecare promisiune care este returnată.

Instalare și configurare

Redux Thunk poate fi instalat rulând npm install redux-thunk --save sau yarn add redux-thunk în linia de comandă.

Deoarece este un instrument Redux, va trebui, de asemenea, să aveți configurat Redux. Odată instalat, este activat folosind applyMiddleware():

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

Cum se utilizează Redux Thunk

Odată ce Redux Thunk a fost instalat și inclus în proiectul dvs. cu applyMiddleware(thunk), puteți începe distribuirea acțiunilor în mod asincron.

De exemplu, iată un contor de incrementare simplu:

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);
  };
}

Și iată cum se configurează acțiuni de succes și eșec după sondarea unui 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 })
    );
  };
};

Mai multe informatii:

  • Cum se implementează sondarea datelor cu React, Redux și Thunk
  • Cum se implementează Redux în 24 de linii de JavaScript
  • Cum să conectați React la Redux – un ghid diagramatic