{"componentChunkName":"component---src-components-blog-template-js","path":"/blog/redux-thunk/","result":{"data":{"markdownRemark":{"frontmatter":{"title":"Redux Thunk","date":"2019-06-13"},"html":"

What is Redux Thunk?\nIt is a method to handle side-effects from performing asynchronous operations in Redux.\nAction in Redux does not allow asynchronous operations such as fetching data from an API. Thunk gives solution to this issue, it allows us to create an action that returns a function using dispatch

\n

The way to implement thunk in Redux is by applying it inside the middleware, like so:

\n
import { createStore, applyMiddleware } from 'redux';\nimport thunk from 'redux-thunk';\nimport rootReducer from './reducers';\n\nconst store = createStore(rootReducer, applyMiddleware(thunk));
\n

After that we can create an action such as:

\n
function loginFormSubmitted(email, password) {\n  return function (dispatch) {\n    return validateLogin()\n      .then((success) => dispatch(loginSuccess(email, password))\n      .catch((error) => dispatch(loginFail(error)))\n  }\n}
\n

By using thunk, we can perform an asynchronous task inside our action in redux. From the code above, if validateLogin function is successful, it will dispatch a loginSuccess function with email and password as the arguments. If it fails, it will dispatch a loginFail function.

"}},"pageContext":{"slug":"/redux-thunk/"}},"staticQueryHashes":[]}