redux-query-immutable

redux-query-immutable

redux-query-immutable is a fork of the redux-query library, with the only difference that it supports a redux store based on ImmutableJS.

Please refer to the documentation of redux-query for details of the API.

Getting Started

Install redux-query-immutable via npm:

$ npm install --save redux-query-immutable

Add the entitiesReducer and queriesReducer to your combined reducer.

Include the queryMiddleware in your store's applyMiddleware call. queryMiddleware requires two arguments: a selector (or function) that returns entities state, and a function for the queries state.

For example:

import { applyMiddleware, createStore } from 'redux';
import { combineReducers } from 'redux-immutable'
import { entitiesReducer, queriesReducer, queryMiddleware } from 'redux-query-immutable';
import createLogger from 'redux-logger';

export const getQueries = (state) => state.get('queries');
export const getEntities = (state) => state.get('entities');

const reducer = combineReducers({
    entities: entitiesReducer,
    queries: queriesReducer,
});

const logger = createLogger();
const store = createStore(
    reducer,
    applyMiddleware(queryMiddleware(getQueries, getEntities), logger)
);

connectRequest

This is an updated version of the connectRequest higher-order component example from the original redux-query library. The biggest change to the original example is that you now have immutable data in the update functions.

import { connectRequest } from 'redux-query-immutable';
import { connect } from 'react-redux-immutable';

class Dashboard extends Component {
    ...
}

const DashboardContainer = connectRequest((props) => ({
    url: `/api/dashboard/${props.dashboardId}`,
    update: {
        chartsById: (prevCharts, dashboardCharts) => (
            prevCharts.mergeDeep(dashboardCharts)
        ),
        dashboardsById: (prevDashboards, dashboards) => (
            prevDashboards.mergeDeep(dashboards)
        ),
    },
}))(Dashboard);

const mapStateToProps = (state, props) => {
    return {
        dashboard: getDashboard(state, props),
    };
};

export default connect(mapStateToProps)(DashboardContainer);

Changelog

2.0.0

Refer to the v2 transition guide for instructions on how to upgrade from redux-query 1.x to 2.x.

• Use the latest entities state when the network request finishes for mutations
• Replace request fields in queries reducer and relevant actions with networkHandler
• New, safer rollback behavior when mutations fail
• New rollback option in query configs to handle reverting optimistic updates
• New, optional reducer, errorsReducer, for tracking response bodies, text, and headers for failed queries
• Change connectRequest to work around a race condition resulting in invalid warnings
• Update to superagent 3.x
• Avoid creating new functions in connectRequest's render function (acontreras89 #67)
• Replace removeEntity and removeEntities actions with a more generic updateEntities action
• Remove reconcileQueryKey and change getQueryKey to only accept query config objects as a parameter
• Replace usage of deprecated react-addons-shallow-compare
• Renamed "network adapters" to "network interfaces"
• Some top-level exports have been removed or renamed (see v2 transition guide for more information)