redux-store
The Goal
Create a store using
react-redux
to manage everythingPut it in
index.js
Wrap it in a
Provider
element fromreact-redux
// ...as before...
import robotsSearch from './reducers'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
const store = createStore(robotsSearch)
ReactDOM.render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('root')
);
createStore
creates a Redux storeWe still need to provide specific actions and dispatchers
Provider
is a way to create the equivalent of a global variableAdds named data to the props of all of the elements within its scope
We won't actually refer to
store
ourselvesIt will be connected when we wire everything together
Connecting the Pieces
Modify
App.js
(our container)connect
takes two functionsWraps the
App
class with something that knows how to talk to a default storeThis code relies on the
store
variable created by theProvider
// ...as before...
import { connect } from "react-redux";
import { setSearchTerm } from "../actions";
// ...map state to properties...
// ...map dispatch function to properties...
class App extends Component {
// ...constructor...
// ...initial data fetch...
// ...render...
}
export default connect(mapStateToProps, mapDispatchToProps)(App)
Mapping State to Properties
Given a state, generate the change to the properties
const mapStateToProps = state => {
return { searchTerm: state.searchTerm };
};
Mapping Dispatch Function to Properties
const mapDispatchToProps = dispatch => {
return {
onSearchChange: event => dispatch(setSearchTerm(event.target.value))
};
};
Constructor
Initialize state as usual
class App extends Component {
constructor() {
super()
this.state = { robots: [], isPending: true }
}
}
Initial Data Fetch
As before
componentDidMount() {
apiCall("https://jsonplaceholder.typicode.com/users").then(
response => this.setState({ robots: response, isPending: false })
);
}
Rendering
Looks pretty much the same as well
Which is the point
Get
onSearchChange
from the propertiesThis is the function named in the object returned by
mapDispatchToProps
react-redux
wires all of this up for us
render() {
const { robots, isPending } = this.state;
const filteredRobots = robots.filter(
robot =>
robot.name.toLowerCase().includes(this.props.searchTerm.toLowerCase())
);
return (
<div className="tc">
<h1>RoboDex</h1>
<SearchBox onSearchChange={this.props.onSearchChange} />
<Scroll>
{
isPending
? <h2>Loading...</h2>
: <CardList robots={filteredRobots} />
}
</Scroll>
</div>
);
}
}
Last updated
Was this helpful?