Redux Connector

Install from npm - yarn add redux-connector or npm install redux --save

A component alternative for the connect HOC from react-redux, using the Function as a child or render prop pattern.

<Connect
  mapStateToProps={mapStateToProps}
  mapDispatchToProps={mapDispatchToProps}
>
  {({ currentUser, login }) => (
    { currentUser.isLoggedIn
    ? <HomeScreen />
    : <LoginScreen login={login} />}
  )}
</Connect>

Rationale

Higher order components are used to wrap other components. This component enables you to use connect straightforwardly within jsx, removing much of the cognitive burden of using connect and refactoring components to use connect.

API:

Redux Connector mirrors the api from the connect method of react-redux. To configure the component, simply add the arguments as props.

Props

• mapStateToProps - (Function),
• mapDispatchToProps - (Function)
• mergeProps - (Function)
• options - (Object)

A more complete Example

import React from 'react';
import Connector from 'redux-connector';
import { loginAction } from '../actions/user';
 
const mapStateToProps = ({ currentUser }) => ({ currentUser });
const mapDispatchToProps = { login: loginAction };
 
const Root = () => (
  <Connect
    mapStateToProps={mapStateToProps}
    mapDispatchToProps={mapDispatchToProps}
  >
    {({ currentUser, login }) => (
      { currentUser.isLoggedIn
      ? <HomeScreen />
      : <LoginScreen login={login} />}
    )}
  </Connect>
)

Shoutout to Max Stoiber for putting this into my head!