happypoulp / redux-tutorial Goto Github PK
View Code? Open in Web Editor NEWLearn how to use redux step by step
Learn how to use redux step by step
E:\Project\redux-tutorial>babel-node 01_simple-action-creator.js
C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\file\logger.js:39
throw new Constructor(this._buildMessage(msg));
^
ReferenceError: [BABEL] E:\Project\redux-tutorial\01_simple-action-creator.js: Using removed Babel 5 option: base.stage
- Check out the corresponding stage-x presets http://babeljs.io/docs/plugins/#presets
at Logger.error (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformatio
n\file\logger.js:39:11)
at OptionManager.mergeOptions (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib
\transformation\file\options\option-manager.js:265:20)
at OptionManager.init (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transfo
rmation\file\options\option-manager.js:465:10)
at File.initOptions (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transform
ation\file\index.js:194:75)
at new File (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transformation\fi
le\index.js:123:22)
at Pipeline.transform (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\transfo
rmation\pipeline.js:45:16)
at Object.transformFileSync (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-core\lib\a
pi\node.js:124:10)
at compile (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-register\lib\node.js:98:20)
at loader (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cli\node_modules\babel-register\lib\node.js:126:14)
at Object.require.extensions.(anonymous function) [as .js] (C:\Users\xxx\AppData\Roaming\npm\node_modules\babel-cl
i\node_modules\babel-register\lib\node.js:136:7)
Thanks for this, quite usefully, your writing is clear and it made learning redux fun, again, thanks!
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
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 ]
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.
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!
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.
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!
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.
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.
ReferenceError: Unknown plugin "true" specified in "foreign" at 0, attempted to resolve relative to
"."
Thank you very much
Thank you very much
Thank you very much
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.
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
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?
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 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.
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!
Ok, I figured that to launch the app in src you need to run example 11
thanks for the effort
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
I tried 'node server.js'.
This really cleared things up for me! Thanks!
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 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_1
is 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)
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.
https://github.com/happypoulp/redux-tutorial/blob/master/05_get-state.js#L83 should have store_3 instead of store_1 ?
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.
Hello, I want to know where could I find last example
, thanks.
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!
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?
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 ran into some error with babel configuration since they using removed babel 5 options.
When I removed all stuff in .babelrc, it works.
Just kidding. Really well written and clear! It helped my understanding of Redux and flux a lot. Thanks!
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!
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?
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 👍
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]preexample: no script for preexample, continuing
6 silly lifecycle [email protected]
7 info lifecycle [email protected]example: [email protected]example: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]
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/binexample: CWD: /Users/davidhandel/code/redux-tutorial
10 verbose lifecycle [email protected]
11 silly lifecycle [email protected]example: Args: [ '-c', 'babel-node --stage=0 "05_simple-action-creator.js"' ]example: Returned: code: 1 signal: null
12 silly lifecycle [email protected]
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 ]
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?
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?
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.