Using yarn:
$ yarn add @tshio/redux-api-params-middleware
Using npm:
$ npm install --save @tshio/redux-api-params-middleware
Then, to enable paramsMiddleware, use applyMiddleware
:
import { applyMiddleware, createStore } from 'redux';
import { apiMiddleware } from 'redux-api-middleware';
import paramsMiddleware from '@tshio/redux-api-params-middleware';
import { appReducer } from 'app/app.reducer';
const middlewares = [paramsMiddleware, apiMiddleware];
const store = createStore(appReducer, applyMiddleware(...middlewares));
In order to add query params to the endpoint of the RSAA we have to add the params
property on the same level as endpoint
.
export const FETCH_USERS_REQUEST = 'users/FETCH_USERS_REQUEST';
export const FETCH_USERS_SUCCESS = 'users/FETCH_USERS_SUCCESS';
export const FETCH_USERS_FAILURE = 'users/FETCH_USERS_FAILURE';
export const fetchUsers = () => ({
[RSAA]: {
endpoint: '/users?scope=email',
method: 'GET',
types: [FETCH_USERS_REQUEST, FETCH_USERS_SUCCESS, FETCH_USERS_FAILURE],
params: {
ids: [1, 2, 3],
},
},
});
We can change our params format by using paramsOptions
.
Default params format is indices.
We are using stringify from qs so we can pass any options from documentation as paramOptions.
params: {
a: ['b', 'c'],
}
paramsOptions: {
arrayFormat: 'indices'
}
// output'a[0]=b&a[1]=c'
params: {
a: ['b', 'c'],
}
paramsOptions: {
arrayFormat: 'brackets' // output 'a[]=b&a[]=c'
}
params: {
a: ['b', 'c'],
}
paramsOptions: {
arrayFormat: 'repeat' // output'a=b&a=c'
}
More information about options in stringify function in qs documentation.