Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Redux examples
import React from 'react'
import { connect } from 'react-redux'
import { doClearQuery } from './some/file/of/action/creators'
// We again use a simple, functional component.
const OurComponent = ({ query, results, clearQuery }) => (
<div>
query: {query}
<button onClick={clearQuery}>Clear</button>
<ul>
{results.map(result => (
<li>
<img src={result.url} alt={result.title} />
{result.title}
</li>
))}
</ul>
</div>
)
// mapStateToProps
// For our select function we're returning an object using
// the implicit return and wrapping it in `()`
const select = appState => ({
results: appState.results,
query: appState.query
})
// mapDispatchToProps
// We could also use object shorthand here to avoid
// building an object, as long as we're OK with the
// props being named the same thing
const actions = { clearQuery: doClearQuery }
// Now we'll pass both select and actions here
// and return our wrapped component.
export default connect(select, actions)(OurComponent)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.