Skip to content

Instantly share code, notes, and snippets.

@lmatteis
Created July 22, 2018 10:53
Show Gist options
  • Save lmatteis/81ff736cd451c3066f3672d9801707cb to your computer and use it in GitHub Desktop.
Save lmatteis/81ff736cd451c3066f3672d9801707cb to your computer and use it in GitHub Desktop.
Bikeshedding some behavioral programming into React
<Behavior
threads={[
function* ({ fetchSavedAudiences, onSelectSearch }) {
const value = yield { wait: onSelectSearch }
const audiences = yield { request: fetchSavedAudiences(value) }
this.setState({ audiences })
},
function* ({ onSelectChange }) {
const selectedAudience = yield { wait: onSelectChange }
this.setState({ selectedAudience })
},
function* ({ fetchSavedAudiences, onSelectSearch }) {
// Show loader while fetching
yield { wait: onSelectSearch }
this.setState({ loading: true })
const response = yield { wait: fetchSavedAudiences }
this.setState({ loading: false })
}
function* () {
// avoid race-condition of old fetchSavedAudiences
// requests taking longer than the latest ones
const response = yield { wait: fetchSavedAudiences }
}
]}
>
({
onSelectChange,
onSelectSearch,
audiences,
selectedAudience,
}) => (
<>
<div>
<Audience
audience={selectedAudience}
/>
</div>
<Select
onChange={onSelectChange}
onSearch={onSelectSearch}
>
{audiences}
</Select>
</>
)
</Behavior>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment