Integrating Redux with Other Libraries & Tools: A How-to Guide

Redux can be seamlessly integrated with many other JavaScript libraries and tools to create robust applications. In this post, we’ll look at some common scenarios where Redux is used in combination with other technologies.

Redux with Redux-Saga for Side Effects

Redux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and impure procedures like accessing the browser cache) in Redux applications easier and better.

To get started, install redux-saga:

npm install redux-saga

Then, create a saga:

import { call, put, takeEvery } from 'redux-saga/effects';

function* fetchTodos(action) {
  try {
    const todos = yield call(Api.fetchTodos, action.payload.userId);
    yield put({ type: 'FETCH_TODOS_SUCCESS', todos });
  } catch (e) {
    yield put({ type: 'FETCH_TODOS_FAILED', message: e.message });
  }
}

function* mySaga() {
  yield takeEvery('FETCH_TODOS_REQUESTED', fetchTodos);
}

export default mySaga;

Lastly, connect the saga to the Redux store:

import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import mySaga from './sagas';

const sagaMiddleware = createSagaMiddleware();

const store = createStore(
  rootReducer,
  applyMiddleware(sagaMiddleware)
);

sagaMiddleware.run(mySaga);

Redux with React-Router for Routing

React Router is a popular routing library for React, and Redux and React Router can be easily integrated:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { Provider } from 'react-redux';
import store from './store';
import HomePage from './HomePage';
import AboutPage from './AboutPage';
import NotFoundPage from './NotFoundPage';

function App() {
  return (
    <Provider store={store}>
      <Router>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route path="/about" component={AboutPage} />
          <Route component={NotFoundPage} />
        </Switch>
      </Router>
    </Provider>
  );
}

In this example, the Redux Provider wraps the entire application, including the Router, so any component in the application can access the Redux store.

Redux with Immutable.js for Immutable Data

Immutable.js is a library that provides immutable data structures, which can be helpful in Redux applications because Redux requires that you do not mutate your state.

To use Immutable.js with Redux, you just need to use Immutable.js data structures for your state:

import { Map } from 'immutable';

function todos(state = Map(), action) {
  switch (action.type) {
    case 'ADD_TODO':
      return state.set(action.payload.id, action.payload.text);
    default:
      return state;
  }
}

In this example, the state is an Immutable.js Map.

Conclusion

Redux is a versatile library that can be used with many other libraries and tools. By combining Redux with libraries like Redux-Saga, React Router, and Immutable.js, you can create powerful, robust applications. In the next post, we will dive into testing Redux applications. Until then, happy coding!