Scribd
Upload
215 views19 pages

7 React Redux React Router Es6 m7 Slides

The document discusses connecting React components to a Redux store. It introduces container and presentation components, with container components connecting to the store using React-Redux's Provider and Connect. Connect maps state from the store to component props using mapStateToProps and maps action creators to props using mapDispatchToProps. The document also compares connecting to Flux stores versus connecting to Redux stores.

Uploaded by

aishas11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
215 views19 pages

7 React Redux React Router Es6 m7 Slides

The document discusses connecting React components to a Redux store. It introduces container and presentation components, with container components connecting to the store using React-Redux's Provider and Connect. Connect maps state from the store to component props using mapStateToProps and maps action creators to props using mapDispatchToProps. The document also compares connecting to Flux stores versus connecting to Redux stores.

Uploaded by

aishas11
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 19

Connecting React to Redux

Cory House
@housecor

reactjsconsulting.com

Heres The Plan

Container vs Presentation Components


React-Redux
- Provider
- Connect
A Chat with Redux

Two Component Types


Container
Focus on how things work
Aware of Redux
Subscribe to Redux State
Dispatch Redux actions
Generated by react-redux

Presentational
Focus on how things look
Unaware of Redux
Read data from props
Invoke callbacks on props
Written by hand

Connecting React to Redux

Action

Store

react-redux
React

Reducers

React-Redux

Provider

Connect

Attaches app to store

Creates container components

React-Redux Provider
<Provider store={this.props.store}>
<App/>
</Provider>

Connect

Wraps our component so its connected to the Redux store.

export default connect(


mapStateToProps,
mapDispatchToProps
)(AuthorPage);

Flux
componentWillMount() {
AuthorStore.addChangeListener(this.onChange);
}
componentWillUnmount() {
AuthorStore.removeChangeListener(this.onChange);
}

onChange() {
this.setState({ authors: AuthorStore.getAll() });
}

Redux
function mapStateToProps(state, ownProps) {
return {appState: state.authorReducer };
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(AuthorPage);
Benefits:
1. No manual unsubscribe
2. No lifecycle methods required
3. Declare what subset of state you want
4. Enhanced performance for free

React-Redux Connect
connect(mapStateToProps, mapDispatchToProps)
What state should I expose as props?

function mapStateToProps(state) {
return {
appState: state
};
}

Reselect

Memoize for performance

React-Redux Connect
connect(mapStateToProps, mapDispatchToProps)
What actions do I want on props?

function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
};
}

3 Ways to Handle mapDispatchToProps


this.props.dispatch(loadCourses());

Ignore it. Use dispatch.

function mapDispatchToProps(dispatch) {
return {
loadCourses: () => {
dispatch(loadCourses());
}
};
}

Manually wrap

function mapDispatchToProps(dispatch) {
return {
actions:
bindActionCreators(actions, dispatch)
};
}

Use bindActionCreators

Option 1: Use Dispatch Directly

// In component...
this.props.dispatch(loadCourses())

Two downsides
1.

Boilerplate

2.

Redux concerns in child components

Option 2: Wrap Manually


function mapDispatchToProps(dispatch) {
return {
loadCourses: () => {
dispatch(loadCourses());
},
createCourse: (course) => {
dispatch(createCourse(course));
},
updateCourse: (course) => {
dispatch(updateCourse(course));
}
};
}
// In component...
this.props.loadCourses()

Option 3: bindActionCreators
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
};
}

Wraps action creators in dispatch call for you!

// In component:
this.props.actions.loadCourses();

A Chat With Redux


React

Hey CourseAction, someone clicked this Save Course button.

Action

Thanks React! I will dispatch an action so reducers that care can update
state.

Reducer

Ah, thanks action. I see you passed me the current state and the action
to perform. Ill make a new copy of the state and return it.

Store

Thanks for updating the state reducer. Ill make sure that all connected
components are aware.

React-Redux Woah, thanks for the new data Mr. Store. Ill now intelligently determine
if I should tell React about this change so that it only has to bother with
updating the UI when necessary.
React

Ooo! Shiny new data has been passed down via props from the store! Ill
update the UI to reflect this!

Container vs Presentation Components

Time to code!

React-Redux
- Provider
- Connect
mapStateToProps
mapDispatchToProps

Next up: Lets code Redux!

You might also like