Skip to content
This repository was archived by the owner on Feb 11, 2021. It is now read-only.

Commit b3f21c9

Browse files
committed
Add better example
This adds a better more real-world example of how redux-trigger works in a realistic scenario.
1 parent 87cf40f commit b3f21c9

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,46 @@ single source of truth for the application?
3535
redux-triggers allows you to set a trigger for a desired state, and then
3636
dispatch the action when the app's state it meets your desired criteria.
3737

38+
## Need a better example?
39+
40+
What's the primary example of logging in or signing up for an application? It's populating the user data, right? However, many applications want other side effects to happen upon login as well.
41+
42+
For example, say you want to always fetch some API data from GitHub for each user upon login. You could set a promise chain as follows:
43+
44+
```Enter Credentials -> Login -> Populate User Data -> Fetch GitHub Data -> Display Data```
45+
46+
However, what about those users who just registered for your site? Now you need another promise chain for that:
47+
48+
```Fill out signup -> Submit -> (User Data already populated) -> Fetch GitHub Data -> Display Data```
49+
50+
Now, what if you want to allow logins via Facebook? Yet another promise chain:
51+
52+
```Click "Login with Facebook" -> Facebook API Login -> Populate User Data -> Fetch GitHub Data -> Display Data```
53+
54+
And sometime in the future, someone will want another API login, like Google, LinkedIn, etc. Let's just hope the developer who implements it knows that they need to implement a similar promise chain!
55+
56+
### A better way
57+
58+
If we drive our application logic from our single source of truth (the Redux state tree), now we can focus on the data we have, and not care how we got it.
59+
60+
So, if we have a redux-trigger that monitors the redux state tree, we can break up the promise chains above. In this instance our trigger would act as such:
61+
62+
```
63+
Matcher: When a GitHub User ID exists, and there's no corresponding GitHub data
64+
Action: Fetch GitHub Data for given User
65+
```
66+
67+
So now, when a user logs in or signs up:
68+
69+
```Enter Credentials -> Login -> Populate User Data```
70+
71+
```Fill out signup -> Submit -> (User Data already populated)```
72+
73+
```Click "Login with Facebook" -> Facebook API Login -> Populate User Data```
74+
75+
They can handle their primary purpose of populating user data, and any time that data is populated, the trigger fires and the GitHub data populates as a result.
76+
77+
3878
## Related Projects
3979

4080
[redux-thunk](https://github.com/gaearon/redux-thunk)

0 commit comments

Comments
 (0)