Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How is Redux passing state to mapStateToProps?

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);
like image 733
kibowki Avatar asked Aug 19 '16 18:08

kibowki


People also ask

What does mapStateToProps do in Redux?

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.

How does Redux manage state?

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.

How connect method works in Redux?

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.

How can the initial state be passed to store using the createStore function?

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.


2 Answers

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
}
like image 142
semanser Avatar answered Oct 04 '22 13:10

semanser


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 .

like image 44
markerikson Avatar answered Oct 04 '22 15:10

markerikson