Skip to content

Connect react components to redux store using component static props

Notifications You must be signed in to change notification settings

afitiskin/react-redux-connect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Installation

yarn add react-redux-connect

Usage

Store all connect options as a static attributes inside your component.

import connect from 'react-redux-connect';
import { actionOne, actionTwo }  from './actions';

export class MySmartComponent {
    static mapStateToProps(state, ownProps) {
        // if you need to map some data from store
        return {
            // some data from state here
        };
    }
    
    static mapDispatchToProps(dispatch, ownProps) {
        // if you need to dispatch some actions
        return {
            actionOne,
            actionTwo,
        };
    }
    
    static mergeProps(stateProps, dispatchProps, ownProps) {
        // if you want to merge props manually
        return {
            // ...
        }
    }
    
    static connectOptions = {
        // if you need to tweek some connect options
        // e.g. pure: false
    };
    
    render() {
        // return something...
    }
}

// and just pass your component to `connect` function
// all settings will be taken from static props
export default connect(MySmartComponent);

Example above is the same to following:

import { connect } from 'react-redux';
import { actionOne, actionTwo }  from './actions';


const mapStateToProps = (state, ownProps) => {
    // if you need to map some data from store
    return {
        // some data from state here
    };
};

const mapDispatchToProps = (dispatch, ownProps) => {
    // if you need to dispatch some actions
    return {
        actionOne,
        actionTwo,
    };
};
    
const mergeProps = (stateProps, dispatchProps, ownProps) => {
    // if you want to merge props manually
    return {
        // ...
    }
};
    
const connectOptions = {
    // if you need to tweek some connect options
    // e.g. pure: false
};

export class MySmartComponent {
    render() {
        // return something...
    }
}

export default connect(mapStateToProps, mapDispatchToProps, mergeProps, connectOptions)(MySmartComponent);

Licence

MIT

Testing

yarn test

Contributing

You are welcome! :)

About

Connect react components to redux store using component static props

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published