I'm trying to understand how React and Redux work, and I was looking at FuelSavingsPage.js from this example project. I get where actions
comes from in mapDispatchToProps
, but I don't understand how state
is being passed to mapStateToProps
or how dispatch
is being passed to mapDispatchToProps
. How is this happening?
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/fuelSavingsActions';
import FuelSavingsForm from '../components/FuelSavingsForm';
export const FuelSavingsPage = (props) => {
return (
<FuelSavingsForm
saveFuelSavings={props.actions.saveFuelSavings}
calculateFuelSavings={props.actions.calculateFuelSavings}
fuelSavings={props.fuelSavings}
/>
);
};
FuelSavingsPage.propTypes = {
actions: PropTypes.object.isRequired,
fuelSavings: PropTypes.object.isRequired
};
function mapStateToProps(state) {
return {
fuelSavings: state.fuelSavings
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(actions, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(FuelSavingsPage);
As the first argument passed in to connect , mapStateToProps is used for selecting the part of the data from the store that the connected component needs. It's frequently referred to as just mapState for short. It is called every time the store state changes.
Redux is a JavaScript library that depicts how an application's state should be managed and accessed. It supports state management via a centralized store. Though there are many libraries like Flux that support state management, data flow in Redux is clear and easier to integrate.
The connect() function connects a React component to a Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.
There are two main ways to initialize state for your application. The createStore method can accept an optional preloadedState value as its second argument. Reducers can also specify an initial value by looking for an incoming state argument that is undefined , and returning the value they'd like to use as a default.
All magic in connect()
function. This function calls mapStateToProps
and passes state
as a prop. The same thing happens with mapDispatchToProps
and the dispatch
method. You can imagine this with the following pseudo-code:
function connect(mapStateToProps, mapDispatchToProps) {
mapStateToProps(store.getState()) // just simple callback
mapDispatchToProps(store.dispatch) // the same
}
The React-Redux connect
function generates a wrapper component that subscribes to the store. That wrapper component calls store.getState()
after each dispatched action, calls the supplied mapStateToProps
function with the current store state, and if necessary, calls mapDispatchToProps
with the store's dispatch
function.
Dan wrote a simplified version of connect
a while back to illustrate the general approach it uses. See https://gist.github.com/gaearon/1d19088790e70ac32ea636c025ba424e .
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With