Redux Thunk is een middleware die je in staat stelt om actiecreators te schrijven die retourneren van functies in plaats van acties. Dit wordt voornamelijk gebruikt voor asynchrone acties. Hier zijn de stappen om het te gebruiken:
1. Installatie: Je moet redux-thunk installeren via npm of yarn. De commando’s zijn respectievelijk `npm install redux-thunk` of `yarn add redux-thunk`.
1. Aanmaken van de Redux Store: Je moet een Redux store aanmaken waarbij je de thunk middleware toepast. Hiervoor heb je `applyMiddleware` nodig van Redux en `thunk` van redux-thunk.
\`\`\`javascript import { createStore, applyMiddleware } from ‘redux’; import thunk from ‘redux-thunk’; import rootReducer from ‘./reducers’; const store = createStore( rootReducer, applyMiddleware(thunk) ); \`\`\`1. Actiecreator schrijven: Nu kan je actiecreators schrijven die functies retourneren in plaats van acties. De geretourneerde functies krijgen `dispatch` en `getState` als parameters. Zodra de asynchrone operaties zijn voltooid, kan je `dispatch` gebruiken om een actie te sturen met de ontvangen data.
\`\`\`javascript function fetchPostsRequest() { return { type: “FETCH\_REQUEST“ } } function fetchPostsSuccess(payload) { return { type: “FETCH\_SUCCESS”, payload } } function fetchPostsError() { return { type: “FETCH\_ERROR“ } } export function fetchPosts() { return (dispatch, getState) => { dispatch(fetchPostsRequest()); return fetchPosts().then( data => dispatch(fetchPostsSuccess(data)), err => dispatch(fetchPostsError(err)) ); }; } \`\`\`1. Dispatching: Nu, je kan `fetchPosts` direct dispatchen vanuit je componenten en Redux Thunk zal de asynchrone actie uitvoeren.
\`\`\`javascript import { connect } from ‘react-redux’; class PostComponent extends React.Component { componentDidMount() { this.props.dispatch(fetchPosts()); } // render etc.. } export connect()(PostComponent); \`\`\`Dit zijn in basis de stappen om Redux Thunk te gebruiken voor je asynchrone acties. Vergeet niet om de relevante Redux- en React-Redux-modules te importeren waar nodig.
