jhorneman

Async data loading in Flux

I've been working with Flux a lot recently, and one of the questions I've been struggling with is in which part of the Flux cycle to put my asynchronous data requests.

Here are some different opinions:

The diagram

The famous Flux diagram puts them in the action creators.

The chat example

jhorneman

How to combine the Flux pattern with large hierarchical data

I've been converting the web client part of an application I'm developing for a client from plain old JavaScript to React and Flux. (Because this is closed-source client work, I will be a bit vague about what the application is and does.)

Something about my data, my use case, and how I've implemented things, or some combination of those three, doesn't fit the Flux pattern well. So I am writing this to explain my problem and hopefully get some interesting feedback on it. (If you're reading this: thanks.)

The application

I have a Python server which talks to a PostgreSQL database and provides data in JSON format over a REST-ish API (not pure REST, more RPC-style).

stipsan

import renderer from 'react-test-renderer'
import Sidebar from '../Sidebar'

jest.mock('react-router-dom/Link', () => 'Link')

it('should render correctly', () => {
  const component = renderer.create(<Sidebar />)
  expect(component.toJSON()).toMatchSnapshot()
})

stipsan

import renderer from 'react-test-renderer'
import Sidebar from '../Sidebar'

jest.mock('react-router-dom', () => ({ Link: 'Link' }))

it('should render correctly', () => {
  const component = renderer.create(<Sidebar />)
  expect(component.toJSON()).toMatchSnapshot()
})

stipsan

import renderer from 'react-test-renderer'
import Select from '../Select'

jest.mock('react-select', () => {
  const { createElement } = require('react')
  // Note that since 'react-select' is mocked we have to use
  // require.requireActual, even inside the factory function that mocks it!
  // Just watch the movie Inception and skip to the Dream within a Dream and you'll get it
  const ReactSelect = require.requireActual('react-select')

stipsan

import renderer from 'react-test-renderer'
import Header from '../Header'
import store from '../store'

jest.mock('react-redux-loading-bar', () => {
  const ReactReduxLoadingBar = require.requireActual('react-redux-loading-bar')

  return {
    // Spread out the original module
    ...ReactReduxLoadingBar,

stipsan

import renderer from 'react-test-renderer'
import App from '../App'

jest.mock('react-router-dom', () => ({
  Link: 'Link',
  Route: ({ children, ...props }) =>
    typeof children === 'function'
      ? children({ match: path === '/somewhere' })
      : createElement('Route', props)
}))

stipsan

import renderer from 'react-test-renderer'
import App from '../App'

// Generated snapshot is exactly like the previous example
// while it's possible to override the default mock
// by using the same jest.mock command as before
// if this test need a different behavior than the
// glboal mock.

it('should render correctly', () => {

stipsan

import renderer from 'react-test-renderer'
import Input from '../Input'

it('should render correctly', () => {
  const component = renderer.create(<Input />)
  expect(component.toJSON()).toMatchSnapshot()

  // getInstance is returning the `this` object you have in your component
  // meaning anything accessible on `this` inside your component
  // can be accessed on getInstance, including props!

stipsan

import renderer from 'react-test-renderer'
import NotificationsContainer from '../NotificationsContainer'

// we can just pass through the component since we pass dispatch prop directly
jest.mock('react-redux', () => component => component)

it('should render correctly', () => {
  const dispatch = jest.fn()
  const component = renderer.create(
    <NotificationsContainer dispatch={dispatch} />