Redux

react

Basic example

// index.ts
import { connect } from 'react-redux'
import { Component, mapStateToProps, mapDispatchToProps } from './Component'
export const ConnectedComponent = connect(
mapStateToProps,
mapDispatchToProps
)(UnconnectedComponent)
// Component.tsx
import React from 'react'
import { doClearQuery } from './some/file/of/action/creators'
const Component = ({ 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 mapStateToProps = 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 mapDispatchToProps = { clearQuery: doClearQuery }

Selectors

export const getSignedInStatus = user => user.isSignedIn
export const getFullName = user => `${user.firstName} ${user.lastName}`
export const getUsername = user => user.username
Edit this page
Want to make your own site like this? Try gatsby-theme-code-notes by Zander Martineau.
Notes on code. My memory bank.