connect.js explained

connect.js

// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
  // It lets us inject component as the last step so people can use it as a decorator.
  // Generally you don't need to worry about it.
  return function (WrappedComponent) {
    // It returns a component
    return class extends React.Component {
      render() {
        return (
          // that renders your component
          <WrappedComponent
            {/* with its props  */}
            {...this.props}
            {/* and additional props calculated from Redux store */}
            {...mapStateToProps(store.getState(), this.props)}
            {...mapDispatchToProps(store.dispatch, this.props)}
          />
        )
      }
      
      componentDidMount() {
        // it remembers to subscribe to the store so it doesn't miss updates
        this.unsubscribe = store.subscribe(this.handleChange.bind(this))
      }
      
      componentWillUnmount() {
        // and unsubscribe later
        this.unsubscribe()
      }
    
      handleChange() {
        // and whenever the store state changes, it re-renders.
        this.forceUpdate()
      }
    }
  }
}

// This is not the real implementation but a mental model.
// It skips the question of where we get the "store" from (answer: <Provider> puts it in React context)
// and it skips any performance optimizations (real connect() makes sure we don't re-render in vain).

// The purpose of connect() is that you don't have to think about
// subscribing to the store or perf optimizations yourself, and
// instead you can specify how to get props based on Redux store state:

const ConnectedCounter = connect(
  // Given Redux state, return props
  state => ({
    value: state.counter,
  }),
  // Given Redux dispatch, return callback props
  dispatch => ({
    onIncrement() {
      dispatch({ type: 'INCREMENT' })
    }
  })
)(Counter)

Alright, now React next! 😄

Thanks for the explanation, @gaearon! Might it be possible that you talk a bit about the performance optimizations in the connect function? Thanks!

Really useful example. Thanks so much.

Why is the unsubscribe method of the decorated component being called here in componentDidMount?
I am confused as the comment says:

it remembers to subscribe to the store so it doesn't miss updates

@therewillbecode see http://redux.js.org/docs/api/Store.html#subscribe

To unsubscribe the change listener, invoke the function returned by subscribe.

Super clear and helpful. Thanks :)

Thank you! Pseudo-implementations help my mental model tons.

Thanks a lot, it makes understanding the redux implementation much easier 👍

great explanation!!! thanks!!!

Wow this is great 👍

Aha moment ! Concise and powerful : terms we hardly associate together with libraries.

👍

here is my decorator to simplify things:

import React from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actions from "./actions";
const decorator = ComponentToDecorate => {
  class ComponentDecorated extends React.Component {
    render() {
      const { authState, authActions, ...rest } = this.props;
      return (
        <ComponentToDecorate auth={{ state: authState, actions: authActions }}
          {...rest}
        />
      );
    }
  }

  return connect(
    state => ({
      authState: state.services.auth.authentication
    }),
    dispatch => ({
      authActions: bindActionCreators(actions, dispatch)
    })
  )(ComponentDecorated);
};

export default decorator;

i use it in some complicated components. is there is anything wrong with this?

fantastic! clear and concise, thanks @gaearon

Thank you,very clear explanation,like you methods to educate.
Especially , you approach when you explain how things work under the hood!

Good and brief explanation

Fantastic work!

Can this be used in prod?

Hooks?

So connect actually returns a new component hah !!! thanks for this snippet

If I use this syntax.

const mapState = ({ state }) => ({ ...state });

1. The component will be heavy?
2. The component will be re-render every time store change?
3. The component will take extra memory to store props?
4. Or it's just a syntactic sugar?

Great Explanation!