makeomatic / makeomatic/redux-connect

Add documentation

Open
#95 4 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

help wanted
Dominant language
JavaScript
Stars
545
Forks
61
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

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reading the README and locate the section where usage examples are documented. Add the supplied User.js container example and its explanation there; done means the example appears accurately in the README and is understandable as a reference for isolating Redux behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
documentation, frontend
Issue type
Documentation
Difficulty
1/5
Estimated time
Under an hour
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.