An open API service indexing awesome lists of open source software.

https://github.com/kutyel/aprende-redux

Code for my Redux Workshop ⚡️
https://github.com/kutyel/aprende-redux

learn-by-doing learn-redux react react-redux redux redux-thunk

Last synced: 6 months ago
JSON representation

Code for my Redux Workshop ⚡️

Awesome Lists containing this project

README

          

![aprende-redux](aprende-redux.png)

# aprende-redux 🔄

Code for my Redux Workshop ⚡️

[![Standard - JavaScript Style Guide](https://cdn.rawgit.com/feross/standard/master/badge.svg)](https://github.com/feross/standard)

## What is Redux?

![redux](redux.gif)

## A _very quick_ overview!

Open this [CodeSandbox](https://codesandbox.io/s/q97z8y8jrq) to learn and play with the basic concepts!

### F.A.Q.

- **Why `redux-thunk` and not `redux-saga`?** Because of [this](https://github.com/kutyel/learn-redux/pull/2)! 🤮

### Exercises

```sh
$ npm i # download dependencies
$ npm start # enjoy! 🚀
```

1. Go to `src/store.js` and _only_ fix the TODO for now...
2. Go to `src/components/App.js`.
3. Great! Now our Redux app is working! 🎉 Let's add some new stuff!
4. Go to `src/actions/types.js` and _only_ fix the TODO for now...
5. Go to `src/actions/index.js` and _only_ fix the TODO for now...
6. Go to `src/reducers/posts.js`.
7. You now introduced a bug! 🐛 _How can you fix it?_ 🤔 (hint: 2 steps)
8. Hint: it would be nice to use `redux-logger`, wouldn't it? 😉
9. Go back to to `src/actions/types.js` and fix the FIXME!
10. Go back to to `src/actions/index.js` and fix the FIXME!
11. Go to `src/reducers/comments.js`.
12. Go to the branch `redux-thunk`, and to `src/actions/index.js` and have a look! 👀
13. Where would you dispatch the action for `fetchComments`??? 🤔 (hint: 2 steps)
14. ##BONUS## ([lenses](https://github.com/kutyel/aprende-react/pull/2) 👓)