makeomatic/redux-connect

Add documentation

Open

#95 opened on Dec 9, 2016

View on GitHub
 (4 comments) (3 reactions) (0 assignees)JavaScript (73 forks)batch import
help wanted

Repository metrics

Stars
 (550 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

Hi,

As a reference for others, I think it would be helpful to add the following example to the readme.

// ./containers/User.js
import { asyncConnect } from 'redux-connect'
import { loadUserSession } from '../actionCreators/session'
import User from '../components/User'

const mapStateToProps = (state, ownProps) => {
	// ... as per redux docs
};

const mapDispatchToProps = (dispatch/*, ownProps*/) => {
	// ... as per redux docs
};

const preloadDataActions = [{
        // dispatch actions here required to preload data for the component to render
	promise: ({ params, store: { dispatch }, location }) => {
		return dispatch(loadUserSession(params));
	}
}];

export default asyncConnect(
	preloadDataActions,
	mapStateToProps,
	mapDispatchToProps
)(User);

This approach allows you to isolate all redux related behaviors to a container, without the need to pollute the component code.

IMHO, i think this is a cleaner approach then using the decorator pattern. Helpful if you want to use packaged components without access to the component source.

Want me to submit a PR?

Adam.

Contributor guide