drcmda / drcmda/react-contextual

How-To: populate store with async data

Open
#16 8 comments 1 reaction 0 assignees View on GitHub
Dominant language
JavaScript
Stars
638
Forks
21
PR merge metrics
No merged PRs in 30d

Description

Hi guys!

I am somehow a bit lost on how to properly populate a store with async data coming from a HOC.
I am running a Meteor app with a react frontend using [react-meteor-data](https://github.com/meteor/react-packages/tree/devel/packages/react-meteor-data).

So basically I am using their HOCs like this:
```jsx
export default withTracker(props => {
// Do all your reactive data access in this method.
// Note that this subscription will get cleaned up when your component is unmounted
const handle = Meteor.subscribe('todoList', props.id);

return {
currentUser: Meteor.user(),
listLoading: !handle.ready(),
tasks: Tasks.find({ listId: props.id }).fetch() // this line actually populates the Component with the tasks
};
})(Foo);
```

What I want to do now, is **populate** my `react-contextual` store **with these `props.tasks`**, so I can use them in my child components. Somehow I just can't figure out how. I seem not to fully understand how to use HOCs and how to pass async data to a store.

**Until now I did it like this:**
I don't have any lifecycle methods in a store which I could use - I used react's old `context` til now and simply did something like this:

```jsx
getChildContext() {
return {
myTasksForChildComponents: this.props.tasks
}
}
```
... and that was it. I could access `this.context.myTasksForChildComponents` in all the child components.

Please help guys! Thanks a bunch!

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.