makeomatic / makeomatic/redux-connect

Handle "asyncConnect" decorated containers that are hidden in the children components

Open
#45 23 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement help wanted question
Dominant language
JavaScript
Stars
545
Forks
61
PR merge metrics
No merged PRs in 30d

Description

I have a nested structure of components (containers). Each has it's own asyncConnect. The top one can hold up to N number of children. These children can come from a CMS. The schema is well defined and each maps to one of these children.

Let's say the top level one would load available categories in an API call. Then the children ( sub-categories ) can be included dynamically, and each would worry about it's own content, separately, independent of the top level container ( other than a route parameter that contains the id of the category ). Each of these children would load details for the sub-category it is responsible for.

Some pseudo code below:

``

```
@asyncConnect([{
promise: ({ store: { dispatch, getState }, params: { categoryId } }) => {
const promises = [];
const state = getState();

if (!categoryActions.isLoaded(state)) {
promises.push(categoryActions.loadCategory(categoryId));
}

....
return Promises.all(promises);
}])
export default class TopLevelContainer extends Component { ....
someChildContext stuff ...
....
render() {
return (





);
}
```

```
@asyncConnect([{
promise: ({ store: { dispatch, getState }, params: { categoryId } }) => {
const promises = [];
const state = getState();

// why is this code not running ? Am I forced to keep this on the parent?

// COMMENT BELOW
if (!subCategoryActions.isLoaded(state, categoryId, 'someSubcategory')) {
promises.push(subCategoryActions.loadCategory(categoryId, 'someSubcategory'));
}

....
return Promises.all(promises);
}])
export default class ChildContainer extends Component { ....
```

So .. I know it's a bit of code, but I was using [the repo that this was forked from](https://github.com/Rezonans/redux-async-connect) in hopes that maybe this would work here. And yeah .. am I doing something wrong? Is this a feature that's implemented and support and I'm not doing something correctly? I also [found this on the older repo](https://github.com/Rezonans/redux-async-connect/issues/47) but I'm not sure it's what I need.

Also, regarding the `// COMMENT BELOW` part, is it somehow possible to get the context in the async connect? [Or is that a more general thing](https://github.com/reactjs/react-redux/issues/289)?

Any help would be greatly appreciated,
Thank you very much!

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 tracing how asyncConnect resolves promises for the Route entry point TopLevelContainer, then compare that behavior with the nested ChildContainer examples. Check the linked older redux-async-connect issue for prior discussion and determine whether hidden child containers are intended to resolve independently; done requires a clear supported behavior for both containers and context access.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.