happypoulp / redux-tutorial Goto Github PK

Hello,Thanks for your redux-tutorial ,but during my studying with you tutorial , There is a error in 04_get-state.js which is ...state Unexpected token;Can you help me ? Thanks a lot!

Thanks for this, quite usefully, your writing is clear and it made learning redux fun, again, thanks!

https://github.com/happypoulp/redux-tutorial/blob/master/05_get-state.js#L83 should have store_3 instead of store_1 ?

I see the point you're trying to reach with using the middleware for async actions but I don't understand what you did here in this example:

var asyncSayActionCreator_1 = function (message) {
    return function (dispatch) {
        setTimeout(function () {
            dispatch({
                type: 'SAY',
                message
            })
        }, 2000)
    }
}

console.log("\n", 'Running our async action creator:', "\n")
store_0.dispatch(asyncSayActionCreator_1('Hi'))

so asyncSayActionCreator_1is a function that takes a message as a parameter but it also returns a function that is expecting a dispatch method as a parameter to later invoke on the actual async action object passed to setTimeout.

in this example you are calling store_0.dispatch on the ActionCreator itself which doesn't make sense to me

store_0.dispatch(asyncSayActionCreator_1('Hi'))

Wouldn't this example make more sense and actually dispatch the asyncAction?

console.log("\n", 'Running our async action creator:', "\n")
asyncSayActionCreator_1('Hi')(store_0.dispatch)

ReferenceError: Unknown plugin "true" specified in "foreign" at 0, attempted to resolve relative to
"."

Started with redux by looking at your tutorial. Thanks for sharing.
I have a question regarding the introduction:

// To get more clarity how MVC and flux differ, we'll
// take a classic use-case in an MVC application:
// In a classic MVC application you could easily end up with:
// 1) User clicks on button "A"
// 2) A click handler on button "A" triggers a change on Model "A"
// 3) A change handler on Model "A" triggers a change on Model "B"
// 4) A change handler on Model "B" triggers a change on View "B" that re-renders itself

Where is the "C" in "classic MVC" in that chain?

Quick question about this file. Is this is generated or is it a template or is it something that has to be written independently?

Just overall review, this tutorial has been amazing and I would love to donate if possible.

What about converting tutorials to markdown. I will be easier to maintain and read them. Because comments in plain file is difficult to read. I can make PR if you want with converted tutorials.

As I was working through the series, I hit a wall quickly where the term "Subscriber" is used in 2.

I think it would help readers to see the term "reducer" used here instead or at the very least to exchange subscriber for another term that is not reserved in the context of Redux already.

Great series by the way just looking to highlight one area that may improve things further from my experience working through it.

In the file 10_middleware.js there is an example of a function that returns functions, but only the last one executes anything. When I saw it immediately recognized it as an opportunity to apply more functional patterns. Specifically it looks like a primitive curry.

I have not yet finished the tutorial or used Redux. So if there a reason later revealed or not covered in the tutorial please let me know.

The original code:

var thunkMiddleware = function ({ dispatch, getState }) {
    // console.log('Enter thunkMiddleware');
    return function(next) {
        // console.log('Function "next" provided:', next);
        return function (action) {
            // console.log('Handling action:', action);
            return typeof action === 'function' ?
                action(dispatch, getState) :
                next(action)
        }
    }
}

Suggested code with curry:

const curry = (fn, ...args) => (
  args.length === fn.length ? 
    fn(...args) : 
    curry.bind(null, fn, ...args)
);

var thunkMiddleware = curry(({dispatch, getState}, next, action) => (
   typeof action === 'function' ?
     action(dispatch, getState) :
     next(action))
);

I tested it and it worked just fine in the context of the tutorial.

How would we go about applying the logMiddleware() function to log all actions for the example in 09_middleware?

Also curious how we could apply disgardMiddleware() function to this example as well? I am guessing we would need more actions to disgard? you mention "could selectively discard a few actions while passing others", How is this beneficial? rather than going through each action one at a time every time an action is called it would only apply the action needed?

Can't believe how epic this tutorial has been, after countless tutorials and blogs its finally setting in 👍

Why does the second level function (which is passed the next function ref) needed? The way applyMiddleware works, the dispatch functions returned by the middleware are stored as such -

store.dispatch = middleware(store)(store.dispatch);

Why can't the next be simply passed as the second parameter in the first middleware function call?

Decorators are experimental feature.

From home.jsx:

React-Redux is exposing a decorator (an ES7 feature...

This is incorrect. connect() is just a function. You don't need decorators or ES7 to use connect(). connect() is just a function that takes some configuration and your component, and returns another component that renders yours with data from Redux store.

Now, technically you can use decorators to apply connect(). So instead of writing

class App extends Component {}
App = connect(
  mapStateToProps
)(App);

you can write, given you enabled decorator support,

@connect(mapStateToProps)
class App extends Component {}

But this absolutely doesn't mean connect() must be used with decorator syntax. In fact we advise against it because the spec is experimental, and experimental features are subject to change and breakage. For example Babel 6 doesn't even ship decorator support (spec is still changing), and this caused a lot of frustration for people who relied on them.

Please don't rely on decorators if you're a beginner or teaching beginners, and don't explain connect() as a decorator because first and foremost, it's a function that takes a component and returns a component. We often call these higher order components.

Higher order component = a pattern. Decorator = syntax sugar that can be used to apply this pattern, and that we don't recommend unless the person using them absolutely knows what they're doing.

I beg you to complete this awesome tutorial with react-router react-router-redux. I couldn't understand redux from anywhere until I found this repo and It's really really helpful and awesome so if you could do a favor for all the reactjs redux community and continue with explaining the router too, it would be really nice :) 👍

Anyway, really thank you for this amazing tutorial.

Trace follows:

npm ERR! Error: ENOENT, open '/home/dockerdev/study/redux-tutorial/node_modules/example/package.json'
npm ERR! If you need help, you may report this *entire* log,
npm ERR! including the npm and node versions, at:
npm ERR!     <http://github.com/npm/npm/issues>

npm ERR! System Linux 3.19.0-31-generic
npm ERR! command "/nodejs/bin/node" "/nodejs/bin/npm" "run" "example" "01_simple-action-creator.js"
npm ERR! cwd /home/dockerdev/study/redux-tutorial
npm ERR! node -v v0.10.40
npm ERR! npm -v 1.4.28
npm ERR! path /home/dockerdev/study/redux-tutorial/node_modules/example/package.json
npm ERR! code ENOENT
npm ERR! errno 34
npm ERR! 
npm ERR! Additional logging details can be found in:
npm ERR!     /home/dockerdev/study/redux-tutorial/npm-debug.log
npm ERR! not ok code 0

Any idea what I'm doing wrong?

Contents of the log file are given below:

0 info it worked if it ends with ok
1 verbose cli [ '/nodejs/bin/node',
1 verbose cli   '/nodejs/bin/npm',
1 verbose cli   'run',
1 verbose cli   'example',
1 verbose cli   '01_simple-action-creator.js' ]
2 info using [email protected]
3 info using [email protected]
4 error Error: ENOENT, open '/home/dockerdev/study/redux-tutorial/node_modules/example/package.json'
5 error If you need help, you may report this *entire* log,
5 error including the npm and node versions, at:
5 error     <http://github.com/npm/npm/issues>
6 error System Linux 3.19.0-31-generic
7 error command "/nodejs/bin/node" "/nodejs/bin/npm" "run" "example" "01_simple-action-creator.js"
8 error cwd /home/dockerdev/study/redux-tutorial
9 error node -v v0.10.40
10 error npm -v 1.4.28
11 error path /home/dockerdev/study/redux-tutorial/node_modules/example/package.json
12 error code ENOENT
13 error errno 34
14 verbose exit [ 34, true ]

This really cleared things up for me! Thanks!

next is not called here:
https://github.com/happypoulp/redux-tutorial/blob/master/09_middleware.js#L68

Does that not prevent the flow to continue?

Could be just me trying to cut corners but I found that the introduction of async actions seemed to make the tutorial take quite a bit more time to understand and as a complete beginner to react/redux I wanted to skip async actions and first understand how regular actions and react work.

However because the final project tying everything together with React uses async actions. I was compelled to go back to the async actions section. Its not a big deal, you explained it well and i understood it, it just felt it would be better as an optional section and wonder if there is a specific reason you introduced it that maybe as a beginner isn't obvious to me.
Thanks for the great tut!

Thanks for this great tutorial. It really makes learning Redux a lot more easier! I finished this but there is one part of the code I can't understand In file 11_src/src/home.jsx on line 109 to 118. which is:

const mapStateToProps = (state/*, props*/) => {
  return {
    frozen: state._time.frozen,
    time: state._time.time,
    // It is very bad practice to provide the full state like that (reduxState: state) and it is only done here
    // for you to see its stringified version in our page. More about that here:
    // https://github.com/rackt/react-redux/blob/v4.0.0/docs/api.md#inject-dispatch-and-every-field-in-the-global-state
    reduxState: state,
  }
}

Here, on line 3, in order to get the value of forzen and time why to we have to call _time function? Why can't we just do frozen: state.frozen ? Is it because we want that reducer be called first before we get these values?
Any help will be appreciated!

Hey, this is a great tutorial!

I had so much trouble with understanding the concept of redux before I fount this tutorial, and I want to help my Korean friends to try this one.

So I'm willing to translate this tutorial to Korean since many of my fellows don't understand English quite well. Would you let me do so?

I followed the instructions in the README so what I did is:

npm install
npm run example 01_simple-action-creator.js

but it gives me the error:

...
npm ERR! missing script: 01_simple-action-creator.js
npm ERR! 
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>

npm ERR! Please include the following file with any support request:
npm ERR!     /var/www/redux-tutorial/npm-debug.log

Why am I getting this error?

Just kidding. Really well written and clear! It helped my understanding of Redux and flux a lot. Thanks!

When I use command npm run example 01_simple-action-creator.js as the README.md write. There is some errors in my terminal.

The error said, I need to upgrade my node and npm version. But my node and npm version is the laste.

I'm following your tutorial and find out a link hasn't worked

// Read more about actions and action creators here:
// http://rackt.org/redux/docs/recipes/ReducingBoilerplate.html

Please update or remove it because it didn't make sense.

npm run example 01_simple-action-creator.js runs correctly but all the subsequent sections fail.

npm debug log:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node',
1 verbose cli '/usr/local/bin/npm',
1 verbose cli 'run',
1 verbose cli 'example',
1 verbose cli '05_simple-action-creator.js' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preexample', 'example', 'postexample' ]
5 info lifecycle [email protected]preexample: [email protected]
6 silly lifecycle [email protected]preexample: no script for preexample, continuing
7 info lifecycle [email protected]example: [email protected]
8 verbose lifecycle [email protected]example: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]example: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/davidhandel/code/redux-tutorial/node_modules/.bin:/Users/davidhandel/.opam/system/bin:/Users/davidhandel/.rbenv/shims:/Users/davidhandel/.rbenv/shims:/usr/local/heroku/bin:/usr/local/git/bin/git:/usr/local/bin:/Users/davidhandel/.rbenv/shims:/Users/davidhandel/.nave/installed/0.10.22/bin:/Users/davidhandel/.dotfiles/bin:/Users/davidhandel/mongodb-osx-x86_64-2.6.4/bin:/Users/davidhandel:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/deployd/bin:/usr/local/git/bin:/Users/davidhandel/.dotfiles/libs/rbenv/bin:/Users/davidhandel/.dotfiles/libs/ruby-build/bin
10 verbose lifecycle [email protected]example: CWD: /Users/davidhandel/code/redux-tutorial
11 silly lifecycle [email protected]example: Args: [ '-c', 'babel-node --stage=0 "05_simple-action-creator.js"' ]
12 silly lifecycle [email protected]example: Returned: code: 1 signal: null
13 info lifecycle [email protected]~example: Failed to exec example script
14 verbose stack Error: [email protected] example: babel-node --stage=0 "05_simple-action-creator.js"
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:233:16)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at EventEmitter.emit (events.js:172:7)
14 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
14 verbose stack at emitTwo (events.js:87:13)
14 verbose stack at ChildProcess.emit (events.js:172:7)
14 verbose stack at maybeClose (internal/child_process.js:818:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:211:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/davidhandel/code/redux-tutorial
17 error Darwin 15.0.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "example" "05_simple-action-creator.js"
19 error node v5.0.0
20 error npm v3.3.6
21 error code ELIFECYCLE
22 error [email protected] example: babel-node --stage=0 "05_simple-action-creator.js"
22 error Exit status 1
23 error Failed at the [email protected] example script 'babel-node --stage=0 "05_simple-action-creator.js"'.
23 error This is most likely a problem with the redux-tutorial package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error babel-node --stage=0 "05_simple-action-creator.js"
23 error You can get their info via:
23 error npm owner ls redux-tutorial
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

Ok, I figured that to launch the app in src you need to run example 11

It might just be me, but the contents of promise-middleware.js seems very complex. I can't make anything of it, despite fully understanding everything else in this tutorial. Is it possible to break something like that down into separate functions and then compose them together? I come mainly from the land of Python where isolating "doing one thing" as its own method/function is a form of documentation.

And please feel free to say, "it's perfectly readable to a typical js developer" if that's the truth.

Hi happypoulp, I love your tutorial!
I was wondering what the syntax on chapter 07 is, is this like a ES6 spread?

var sayActionCreator = function (message) { return { type: 'SAY', message } }

the argument to function is of type String, so I'm a bit confused

The tutorial is too great.

It makes me skip my dinner and sleep, keep reading it.

This is not good for my health. How should I deal with this issue?

Thanks a lot for the awesome tutorial.

You really know how to teach & write.

I tried 'node server.js'.

Isn't Object Spread a ES7 proposed feature?

And also wouldn't that only work for shallow combining objects or would that not matter if you only shallow copy a nested state tree in a reducer?

thanks for the effort

Hi mate,

Awesome tutorial btw!!! Why I haven't seen this before, I've been searching for a good tutorial with the flux/redux architecture for a long time, and haven't grasp any of it. With this tutorial, it is really helpful. I don't have any issues, but a request. Please make a tutorial for react router, and possibly with redux combined. Thanks!

Thank you very much
Thank you very much
Thank you very much

npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.2
npm ERR! peerinvalid Peer [email protected] wants react@^0.14.0

"react-dom" may not be compatible with "react".

"react" should be "^0.14.0" instead of "0.14.0".

I'm using node 0.12.7. When I get to step 3,

(function (exports, require, module, __filename, __dirname) { import { createS
                                                              ^^^^^^
SyntaxError: Unexpected token import
    at exports.runInThisContext (vm.js:73:16)
    at Module._compile (module.js:443:25)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Function.Module.runMain (module.js:501:10)
    at startup (node.js:129:16)
    at node.js:814:3

import is a reserved word? What version of node do I need to be using to run this? Doesn't the latest have ES6 features in it?

hey man, outstanding tutorial!

i was just following along in the wiki view and the link for tut-10 is broken at the bottom of tut-9.

https://github.com/happypoulp/redux-tutorial/wiki/tutorial-10-middleware

thanks again for the fine work!

Could you explain why the initial reducer shows {} but the subsequent ones recieve [] https://github.com/happypoulp/redux-tutorial/blob/master/06_combine-reducers.js

I ran into some error with babel configuration since they using removed babel 5 options.
When I removed all stuff in .babelrc, it works.

I have been through this tutorial a few times; although redux is not necessarily tied to React, let's assume it's coupled for a moment.

What I am missing is how to create an action from a react component and dispatch that action to a redux store. There is no code in the tutorial that I have seen that shows this part and it's sorely missing.

Furthermore, it would also be nice to see how to subscribe to a redux store from a react component

Hello, I want to know where could I find last example, thanks.