https://github.com/juliankrispel/redux-connector

A component wrapper for the connect method from react-redux, Using the renderProp pattern (PROOF OF CONCEPT)
https://github.com/juliankrispel/redux-connector

react react-redux redux

Last synced: about 1 month ago
JSON representation

A component wrapper for the connect method from react-redux, Using the renderProp pattern (PROOF OF CONCEPT)

• Host: GitHub
• URL: https://github.com/juliankrispel/redux-connector
• Owner: juliankrispel
• License: mit
• Created: 2017-10-08T11:48:23.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-17T10:14:51.000Z (about 7 years ago)
• Last Synced: 2024-10-12T22:32:54.451Z (2 months ago)
• Topics: react, react-redux, redux
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/redux-connector
• Size: 88.9 KB
• Stars: 63
• Watchers: 3
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - redux-connector - A component wrapper for the connect method from react-redux, Using the renderProp pattern (PROOF OF CONCEPT) (JavaScript)

README

        
__DISCLAIMER__: This component is a __proof of concept__. Use it with care. It'll work but has one performance downside:

- If any of the props of this Connector component update, it'll rerender its entire subtree.

# Redux Connector

[Install from npm](https://www.npmjs.com/package/redux-connector) - `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](https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9) or [render prop](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) pattern.  

```jsx

  {({ currentUser, login }) => (

    { currentUser.isLoggedIn

    ? 

    : }

  )}

```

## 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`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) method of [react-redux](https://github.com/reactjs/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

```jsx

import React from 'react';

import Connector from 'redux-connector';

import { loginAction } from '../actions/user';

const mapStateToProps = ({ currentUser }) => ({ currentUser });

const mapDispatchToProps = { login: loginAction };

const Root = () => (

  

    {({ currentUser, login }) => (

      { currentUser.isLoggedIn

      ? 

      : }

    )}

  

)

```

Shoutout to [Max Stoiber](https://twitter.com/mxstbr) for putting this into my head!