Reduction Reduction Pattern

Question

When writing redux-thunk functions known as thunks, there is a dedicated template that can be easily distracted. For example, in most of our asynchronous API calls, we do the following without any side effects:

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

Easy! Although, since this covers at least 70% of our queries, I am sure there is an elegant way to ignore the allocation of the above code to something like this (pseudocode):

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

When we need to check the condition and other side effects, we can return to the correct tick. Although in most cases ... could we cut it?

Any elegant ideas?

Answer 1

Redux Thunk allows you to enter a custom argument from version 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 the future, if your thunks get too complicated, you may consider redux-saga or redux-observable .

Answer 2

Unfortunately, there is no general approach to this exact problem in the reduct community. I personally believe that people should not be afraid to write their own wrappers around redux in order to deal with such situations.

I created a library called redux-tiles , which actually has an almost exact API as you want :) For example, you will look like code for example:

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

As you can see, there are no constants, as well as a gearbox. These things are created automatically, so you do not need to do this, as well as testing. There are other functions, such as nesting (for example, the same function will be used to extract elements by id, but they will be correctly updated inside the reducer) and caching. You can check the examples here .

The redux saga is also a good thing, but it’s more if you need some kind of reactivity, if you need a more traditional approach, just a little more convenient way to describe your actions and combine them without repeating yourself, then I believe that my library is perfect fits.