Add documentation

[adam-26]

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.

[AVVS]

Great idea, please do, thanks!

[AVVS]

@adam-26 PR is still very welcome. Happy New Year :)

[adam-26]

I'm on vacation :) I'll submit the PR once I'm back in the office.

…

Den 7. jan. 2017 kl. 02.11 skrev Vitaly Aminev ***@***.***>: @adam-26 PR is still very welcome. Happy New Year :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[vugemsoft]

Almost similar to @adam-26 situation, i also have my components setup exactly like this:

// ./containers/User.js
import { asyncConnect } from 'redux-connect'
import User from '../components/User'
import action from '../../actions'

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

const preloadDataActions = [{
	promise: ({ store: { dispatch } }) => {
		return dispatch(action.auth);
	}
}];

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

But in my router setup, things look like this:

<Route path="somepath" component={Wrapper(User)}>
 /* a lot of children route go here */
</Route>

And the thing is the promise never get fired (state-props mapping works fine). If I strip-off the Wrapper everything works perfect - so what is the correct way or workaround to deal with the Promise action in this situation? Note that I dont really want to touch the Wrapper nor the Route setup.
Tks