Dev Log: Nov 14, 2016

Originally published on Medium.

A highly productive day focused on Redux. A few good things landed, one open question remains.

Redux + thunkMiddleware for Async Actions

Continued wiring up Redux with thunkMiddleware to handle async actions — specifically for SignalR hub method calls that return Promises. Getting the store set up with Redux DevTools support at the same time:

import React from 'react';
import { render } from 'react-dom';
import thunkMiddleware from 'redux-thunk';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

let store = createStore(
  login,
  composeEnhancers(applyMiddleware(thunkMiddleware))
);

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
);

The composeEnhancers fallback is the key bit — it plugs in the Redux DevTools extension when it’s available in the browser, and falls back to plain compose in production or when the extension isn’t installed.

Redux DevTools

Found the Redux DevTools browser extension today. Being able to inspect state after every dispatched action is a game changer for debugging. Highly recommend getting this set up early on any Redux project.

Testing: SinonJS

Identified SinonJS as a valuable spying and stubbing library for async testing. Will write more on this in a future post.

Open Question: Redirects in React Router + Redux

Still have an unresolved architecture question around redirect handling. Currently implemented through component lifecycle methods, but this doesn’t feel right — it lacks proper separation of concerns. Need to find the idiomatic Redux way to drive navigation.