Now with the Flux architecture in place, we will rethink how our React components get data that they need to render. As you know, there are usually two sources of data for a React component:
Calling another library, for example, calling the
jQuery.ajax()
method, or in our case,SnapkiteStreamClient.initializeStream()
Receiving data from a parent React component via the
props
object
We want our React components to not use any external libraries to receive data. Instead, from now on, they will get that same data from stores. Keeping this plan in mind, let’s refactor our Stream
component.
Here is how it looks now:
import React from ‘react’; import SnapkiteStreamClient from ‘snapkite-stream-client’; import StreamTweet from ‘./StreamTweet’; import Header from ‘./Header’; class Stream extends React.Component { constructor() { super(); this.state = { tweet: null }; } componentDidMount() { SnapkiteStreamClient.initializeStream(this.handleNewTweet...