emmenko / redux-react-router-async-example Goto Github PK
View Code? Open in Web Editor NEWA showcase of the Redux architecture with React Router
Home Page: http://emmenko.github.io/redux-react-router-async-example
License: MIT License
A showcase of the Redux architecture with React Router
Home Page: http://emmenko.github.io/redux-react-router-async-example
License: MIT License
for now I just changed webpack.config.js
'DEVTOOLS': process.env.DEVTOOLS === 'true' ? true : true
and then 'npm start' shows devtools
There are an error Uncaught TypeError: reducer is not a function
if you running a project with devtools (npm run start:devtools
) and making changes in reducer. I guess it's HotModuleReplacementPlugin bug, but I've never encountered such bug before.
There no such bug in hot replacing another project files.
Just a note, when upgrading to [email protected] the requireAuth()
method for onEnter
needs to be updated: https://github.com/emmenko/redux-react-router-async-example/blob/master/lib/Root.js#L100
function requireAuth(nextState, replaceState) {
const state = store.getState();
const isLoggedIn = Boolean(state.application.credentials);
if (!isLoggedIn) {
replaceState({}, '/login', {
nextPathname: nextState.location.pathname,
});
}
}
I'm not really sure how to use replaceState. Should we be passing in an empty object, or nextState?
Please add a licens file for this repository.
First of all, I know this is a WIP and thanks for creating this amazing starter/example.
I am curious if you plan or would be able to provide an example for deploying to Heroku. As it currently stands, the production build fails when deploying to Heroku.
Thanks again!
There's a breaking change to the compose() function in Redux 2. I was playing with your boilerplate and updated. However, it breaks the Root store creator.
I applied the fix. Here it is if you like.
Hi,
I see on the redux examples (real-world) that it is using
there are some especial reason that you're not using it?
Hi,
would be great if you upgrade your example to react, react-dom 0.14.0, since it was recently released.
Regards.
It would be really interesting if you can tell about the decision of using Redux Router over React Router Redux.
I saw that you had an issue for using React Router Redux, and finally you chose the Redux Router.
Can you share your knowledge about this?
10x!
Solved, please remove.
When you change something in the locales, you get the following error:
<Provider> does not support changing `store` on the fly.
It is most likely that you see this error because you updated to Redux 2.x and React Redux 2.x which no longer hot reload reducers automatically.
See https://github.com/rackt/react-redux/releases/tag/v2.0.0 for the migration instructions.
Although looking at the code in configure-store.js, it seems that you followed the changes correctly.
can you explain the usage and the reasone why you create a fetchOnUpdate decorator?
Thanks in advice
Accessing the login page from a link / bookmark / external site currently fails because location.state
is only defined when triggering requireAuth
from a protected route. If the login page is accessed directly, location.state
is undefined and therefore location.state.nextPathname
throws a TypeError
.
This isn't really an issue with your work here. What you've done looks fantastic :) I'm still trying to understand it all, but I was hoping you could help me understand where the React Router API could be better for you to work with.
At React Europe, @gaearon demonstrated how redux lets you really easily do things like record/replay. However, in the 1.0 router API we don't exactly have a clean place for you to record location changes so you can replay them later. Is this a problem for you? If so, what would an ideal API look like for that use case?
I appreciate any knowledge you can share. Thanks!
It would be great to add https://www.npmjs.com/package/redux-react-router in this project.
That way the current route is also stored in the state, which makes a lot of sense.
in Login.js
handleInputChange (evt) {
this.setState({
[evt.target.name]: evt.target.value
})
}
evt.target.name gets nothing
> evt.target.name
< ""
should be evt.target.type or use refs instead.
First off, thank you so much for publishing this, relatively new to React and need to implement React-Intl in ES6, this repo is a lifesaver.
Particularly helpful is the fact that this example combines React Router with React-Intl, something sorely missing from the React-Intl "examples" section (read all of this: remix-run/react-router#484 and then realized this was for ES5 + React-Intl 1.x).
Second, one question that I still have when looking through your app, why did you store the current "locale" in LocalStorage instead of a traditional "store"?
Perhaps I'm missing something Redux-related.
i checked the demo and i don't see why you mentioned it is Async because its loading all components with app only.
I'd like to apply all '_translations' file that I translated to apply to original json such as 'lib/i18n/de.js'. Is there any good way to apply translations xml file to original json? I couldn't find automatic ways. Do I have to copy and paste per each changed sentence.
From DevTools:
Uncaught Error: locals[0] does not appear to be a `module` object with Hot Module
replacement API enabled. You should disable react-transform-hmr in production by
using `env` section in Babel configuration.
So it appears the translation steps go like this:
(per-view files from babel-transform-react-intl) =>
(individual .json files) =>
(per-locale XLIFF)
This automatically creates the en
locale and updates the <source>
entries in other locales, if they exist, while preserving <target>
.
I'm just curious, how do you complete the circle? I assume you upload the XLIFF to a supplier like Transifex, but then do you merge the XLIFF back down into JSON to be loaded by the app?
Hey
I'm playing with this nice boilerplate but i'm a little confused on how to force a child component to wait for some data to be loaded.
In my case, fetchOnUpdate
doesnt wait for the result before rendering the child.
Should i manually wrap every component into a HoC that toggle the child based on the existence of a desired prop ?
ex :
render() {
if (this.props.data) {
return <ChildComponent {...this.props.data}/>
} else {
return <div>Loading...</div>;
}
}
maybe there's any existinsting decorator/HoC that can handle this for me ?
Thanks
How can i make this project isomorphic ?
Subj
Why is it called "redux-react-router-async-example"?
ReferenceError: Can't find variable: Intl
First thanks for such a great example.
I have one problem when reading and learning your code that really confused me, so I look to you for help.
In /persistence/store
, the return of the function is
return Object.assign({}, store, {
dispatch (action) {
store.dispatch(action)
...
}
})
And I have no idea about the last params in Object.assign(), why there is function inside the object? where is dispatch comes from?
It may be a basic question of JS feature, if so, could you tell me where to find the document, I can check myself.
Thanks a lot
Just starting with Redux, without flux knowledge.
I can't get the meaning of actionHandlers, where is it from?
No action creators?
Anyway... What's the meaning of the underscore parameter _?
const actionHandlers = {
[constants.LOGGED_IN]: (_, action) => action.payload,
[constants.LOG_OUT]: () => ({ token: null }),
[constants.LOCALE_SWITCHED]: (_, action) => ({ locale: action.payload })
....
Thank you very much for your hard work.
amazing work !
it's there a way to remove the i18n support ? it's �just not necessary for some case .
There is a lot of value in this repo and I really appreciate the time you took to help the community with sharing this codebase. Kudos for that.
I think though, this is an opinionated project, not a minimal example in the likes of the redux docs, that are very minimal and try to be less opinionated. The Readme already explains some decisions, which I think is very nice. But I would suggest a bit more explanation.
This is outputting a very large bundle of about 100k compressed Javascript, and I dig a bit to analyze it. It's easier for people already familiar with all this technologies to reason and learn from this repo, but beginners would probably have a hard time understanding all of it. A bit of documentation might be the only thing it needs, or maybe extracting a minimal example on a different repo might be a good idea too.
Once more, please don't take this negatively. I really appreciate the project and it was very valuable to me. It is just some things to think about if you intend to work a bit more on this repo.
For reference, this is some of the things I did to analyze the bundle size:
$NODE_ENV=production webpack --json --config webpack.config.production.js | analyze-bundle-size
react: 609.67 kB (56.1%)
fbjs: 32.87 kB (5.39%)
<self>: 32.87 kB (100%)
<self>: 576.8 kB (94.6%)
react-intl: 121.01 kB (11.1%)
intl-messageformat: 53.26 kB (44.0%)
intl-messageformat-parser: 36.08 kB (67.7%)
<self>: 36.08 kB (100%)
<self>: 17.18 kB (32.3%)
intl-relativeformat: 14.66 kB (12.1%)
<self>: 14.66 kB (100%)
intl-format-cache: 2.86 kB (2.36%)
<self>: 2.86 kB (100%)
intl-relativeformat .: 15 B (0.0121%)
<self>: 15 B (100%)
intl-messageformat .: 15 B (0.0121%)
<self>: 15 B (100%)
<self>: 50.2 kB (41.5%)
react-router: 79.71 kB (7.33%)
warning: 1.76 kB (2.21%)
<self>: 1.76 kB (100%)
invariant: 1.5 kB (1.89%)
<self>: 1.5 kB (100%)
<self>: 76.44 kB (95.9%)
history: 57.55 kB (5.29%)
qs: 12.58 kB (21.9%)
<self>: 12.58 kB (100%)
deep-equal: 3.8 kB (6.61%)
<self>: 3.8 kB (100%)
warning: 1.76 kB (3.07%)
<self>: 1.76 kB (100%)
invariant: 1.5 kB (2.61%)
<self>: 1.5 kB (100%)
<self>: 37.91 kB (65.9%)
webpack: 45.85 kB (4.22%)
<self>: 251 B (0.535%)
redux-router: 23.67 kB (2.18%)
deep-equal: 3.8 kB (16.1%)
<self>: 3.8 kB (100%)
<self>: 19.86 kB (83.9%)
redux: 18.54 kB (1.71%)
<self>: 18.54 kB (100%)
react-redux: 17 kB (1.56%)
invariant: 1.5 kB (8.85%)
<self>: 1.5 kB (100%)
hoist-non-react-statics: 854 B (4.91%)
<self>: 854 B (100%)
<self>: 14.66 kB (86.2%)
babel-runtime: 12.52 kB (1.15%)
core-js: 7.87 kB (62.8%)
<self>: 7.87 kB (100%)
<self>: 4.65 kB (37.2%)
whatwg-fetch: 9.69 kB (0.891%)
<self>: 9.69 kB (100%)
parse-link-header: 1.38 kB (0.127%)
xtend: 384 B (27.2%)
<self>: 384 B (100%)
<self>: 1 kB (72.8%)
classnames: 1.08 kB (0.0994%)
<self>: 1.08 kB (100%)
redux-thunk: 375 B (0.0337%)
<self>: 375 B (100%)
react-dom: 63 B (0.00566%)
<self>: 63 B (100%)
<self>: 89.41 kB (8.22%)
You can also save the JSON output and upload to the visual analyzer here: http://webpack.github.io/analyse/ It might be a bit overwhelming tho.
Redux 1.0 RC is out with breaking changes. No further API changes are expected in 1.0 so it may be a good time to port the example to 1.0 RC (in a branch). We will release 1.0 when the docs are ready.
You can find the comprehensive list of the changes in 1.0 RC against 1.0 alpha in the Redux 1.0 RC release notes. If you haven't ported to alpha yet, you'll need to apply changes from 0.12 to alpha first.
Thank you!
Please make sure to report any issues so we can release a stable 1.0.
as title asks :)
ReferenceError: Can't find variable: Intl
Maybe use http://formatjs.io instead of babel intl?
Hi,
You need update one reference on your README file
You're using React Transform (react-transform-her - https://github.com/gaearon/react-transform-hmr)
and not React Hot Loader, in fact it is already deprecated.
Regards.
Hi, it would be nice to include some tests and coverage as well.
I've started with actions/application
, I will add more!
I'm developing a react app using https://github.com/davezuko/react-redux-starter-kit.
I'm studing your code for the localization.
However I can't load json language files as you do (import * is awesome for this).
I can see it works in your project but not in mine:
http://stackoverflow.com/questions/34453020/import-doesnt-load-the-object-in-es6
Is it due to some webpack loader issue or some kind of extra configuration?
const createHistory = process.env.NODE_ENV === 'production' ? createHashHistory : createBrowserHistory
on the localhost everything is fine but when getting a build then "#/?_t"
how can I fix this?
Thanks!
I was changing components to use Material UI awesome ones when I tried implement a Selectable List (see: http://www.material-ui.com/#/components/list) and I got this very funny error:
0 info it worked if it ends with ok
1 verbose cli [ 'c:\\Program Files\\nodejs\\node.exe',
1 verbose cli 'c:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 silly lifecycle [email protected]~prestart: no script for prestart, continuing
7 info lifecycle [email protected]~start: [email protected]
8 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
9 c:\Users\Aleff\Desktop\github\redux-react-router-async-example
11 silly lifecycle [email protected]~start: Args: [ '/d /s /c', 'npm run build && node server.js' ]
12 silly lifecycle [email protected]~start: Returned: code: 1 signal: null
13 info lifecycle [email protected]~start: Failed to exec start script
14 verbose stack Error: [email protected] start: `npm run build && node server.js`
14 verbose stack Exit status 1
14 verbose stack at EventEmitter.<anonymous> (c:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:232: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.<anonymous> (c:\Program Files\nodejs\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 c:\Users\Aleff\Desktop\github\redux-react-router-async-example
17 error Windows_NT 10.0.10586
18 error argv "c:\\Program Files\\nodejs\\node.exe" "c:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "start"
19 error node v5.3.0
20 error npm v3.3.12
21 error code ELIFECYCLE
22 error [email protected] start: `npm run build && node server.js`
22 error Exit status 1
23 error Failed at the [email protected] start script 'npm run build && node server.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the redux-react-router-async-example package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error npm run build && node server.js
23 error You can get their info via:
23 error npm owner ls redux-react-router-async-example
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]
Any idea about what did happen?
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.