How to implement initial data fetch

[bardt]

If I correctly understand the intention of this library, it is supposed to move decision making as close to reducers as possible. Classic example of React+redux flow is to fetch data needed to render a React component from componentDidMount lifecycle hook in the component itself:

class DataViewer extends React.Component {
  componentDidMount() {
    this.props.dispatch(fetchDataIfNeeded());
  }

  render() {
    return (
      <div>
        { this.props.data ? 
          <DataList data={ this.props.data }/> : 
          <Preloader /> 
        }
      </div>
    );
  }
}

If we try to move this logic inside reducer, we can add fetchDataIfNeeded to Effect returned after an action leading to displaying this component occurred, like in this example.

Additionally, we have to handle the initial state leading to display DataViewer without any action made yet. Example situation:

1. The initial state is restored from URL.
2. The initial state is passed to createStore.
3. We don't want to handle data fetching manually, but instead, we assume reducer to check if we have enough data to show DataViewer and return a loop with fetchDataIfNeeded if it is the case.

The question is how to handle this init step in reducer. Using @@INIT action is considered an anti-pattern. @@ReduxLoop/INIT happens later if we already returned initial effect.

So, what is the suggested way to decide the need of initial effects?

[bdwain]

i think the code you have (using componentdidmount) makes sense. the component needs the data, so it should be the one that asks for it.

[bardt]

@bdwain, as we are trying to implement more Elm architecture principles around Redux (and redux-loop makes a great job), the view is supposed to be as dumb as possible. If we use some dumber alternative to React without such lifecycle hooks, wich would be the place for such data fetching logic right after store init?

[bdwain]

If you want to do it right after store init you could just dispatch the action manually right after you create the store.

const store = createStore(...)
store.dispatch(createFetchInitialDataAction())

[lukewestby]

@bdwain's suggestion is typically how we handle it at Raise. This let's make use of dispatch being modified to return a promise as well, in case you want to wait for your initial data fetch to complete before rendering or doing anything else.

[lukewestby]

I'd like to push this off as a task for version 4.0 or 3.1 or whatever it ends up being. I'm getting ready to release 3.0 shortly