Upgrade react version about nicistore HOT 19 CLOSED

Thank you @andreftavares I am able to .. get everything working 😄 .. little errors .. here and there .. but overall store is functional now ..... It is really a wonderful app ... will ask you for help if anything needed .. there are lot of small things .. that are maybe non functional now .. will try to fix them and will make a PR.

from nicistore.

A PR would be highly appreciated :) Thanks for your feedback and support! And looking forward to see the results of you using the app!

from nicistore.

1. State is dehydrated on the server-side
2. Placed on window.App
3. When the page is rendered on the client and the App starts, the state is rehydrated

from nicistore.

@manojsinghnegiwd

When exactly stores rehydrate function is get called ?

Like I said before, that is done here which is from the Fluxible library (see here). So, if you're not referring to the "overall" rehydrate, but store-specific ones... you have to get into the Fluxible library. What you can check is that each store has their own dehydrate/rehydrate methods (example) that specify how that happens.

ProductsHomepageStore store rehydrate function is not get called

You're saying this store's state isn't being rehydrated? It should.

And which function fetches which data ?

• Views "fetch" data from stores
• Store updates should trigger views re-render
• Stores are expected to be populated somewhere in time
• Population of stores is done by:
  1. Triggering actions (example)
  2. That will eventually make necessary requests (example part 1 -> example part 2)
  3. Upon response, trigger events (example)
  4. Stores listen to specific events and update respectively (example)

execution flow ... how it fetches data

a. You trigger the actions anywhere it may make sense (e.g. on React's componentDidMount)
b. If you have data that you want to make sure is in store when a page component is rendered, thus, enabling server-side render of pages (and note, this only works for page components, the ones you see on the routes file), you do it by implementing the fetchData method (example). What happens is that, in every route change (be it on the client or on the server), the process waits that all fetchData's finish (thus, making sure that respective stores are populated) before going on with rendering the components.

You can see more details on the internals of fetchData util here

from nicistore.

I don't have any experience with react-router other than 0.13.x :/ So I'm afraid I cannot help you with that...

from nicistore.

@andreftavares

I have checked the nicistore. Its very nice and responsive.

but I also need this store with the latest react version as the many of react modules are not working with the nicistore because of react older version.
Its better if you can release the updated version.

Thanks for your efforts.

from nicistore.

@lvtrvd thank you for your feedback!

React router is a tricky little thing... at the time I started this project, version 1.0 had been released but I couldn't find a way to make it work for me in isomorphic rendering. Can't recall what was the issue... if it was with the lib or with me eheh Then I found more people like me that ended up settling for the stable and tested 0.13.

What kind of modules are we talking about that are incompatible with Router?

As I said before, that is definitely on the roadmap, but unfortunately not any time soon. Again, PRs are welcome! :)

from nicistore.

@manojsinghnegiwd your question is very broad :) Could you be more specific? Like... you're wondering how server-side stated is passed to the client and how stores have access to it?

from nicistore.

@manojsinghnegiwd upgrading packages to more recent versions is on the roadmap, but not for the near-term unfortunately. But PRs are welcome :)

from nicistore.

@andreftavares Hello thanks for your reply

I myself trying to upgrade the react version to 15.3.2. I am getting this error when navigating to index page.

Cannot read property 'atlas' of undefined

This is my package.json file

{
  "name": "nicistore",
  "version": "1.0.0",
  "description": "NICI Online Storefront",
  "private": false,
  "repository": {
    "type": "git",
    "url": "https://github.com/yoonic/nicistore.git"
  },
  "main": "index.js",
  "scripts": {
    "build": "rm -rf static/dist && webpack --stats --progress --config ./webpack/prod.config.js",
    "dev": "NODE_ENV=development DEBUG=nicistore node index",
    "prod": "NODE_ENV=production DEBUG=nicistore node index"
  },
  "author": "André Tavares",
  "engines": {
    "node": "4.2.5",
    "npm": "3.5.3"
  },
  "dependencies": {
    "async": "1.5.2",
    "babel": "^6.5.2",
    "babel-plugin-transform-class-properties": "^6.16.0",
    "babel-polyfill": "^6.16.0",
    "babel-runtime": "^6.11.6",
    "css-loader": "0.18.0",
    "debug": "2.2.0",
    "envify": "^3.4.1",
    "expose-loader": "0.7.0",
    "express": "4.13.3",
    "fbjs": "^0.8.5",
    "file-loader": "0.8.4",
    "fluxible": "^1.2.0",
    "fluxible-addons-react": "^0.2.8",
    "intl": "1.1.0",
    "intl-locales-supported": "1.0.0",
    "jstransform": "^11.0.3",
    "marked": "^0.3.5",
    "moment": "^2.13.0",
    "node-sass": "3.3.2",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-ga": "^2.1.2",
    "react-intl": "^2.1.5",
    "react-router": "^2.8.1",
    "regexpu": "^3.3.0",
    "sass-loader": "2.0.1",
    "serialize-javascript": "1.2.0", 
    "style-loader": "0.12.4",
    "superagent": "1.8.3"
  },
  "devDependencies": {
    "autoprefixer-loader": "3.1.0",
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-stage-0": "^6.16.0",
    "babel-preset-stage-3": "^6.17.0",
    "babel-register": "^6.16.3",
    "extract-text-webpack-plugin": "1.0.1",
    "strip-loader": "0.1.2",
    "webpack": "1.12.15",
    "webpack-dev-server": "1.10.1",
    "webpack-stats-plugin": "0.1.1"
  }
}

I updated lot of the dependency and also edited some of the code, If you can help me out I can push my code in a separate branch in nicistore repo.

from nicistore.

@andreftavares Hello I am still on it ..

[React Intl] Missing locale data for locale: "undefined". Using default locale: "en" as fallback.

I am getting this maybe you can help me out .. and tell me little about how you implemented locale internalisation

from nicistore.

Hello @andreftavares Can you please help me out in this .. and walk me through the process how routing is implemented in nicistore .. I am halfway through updating it the react 0.14.8. If you can help me out that is great.

from nicistore.

@manojsinghnegiwd sorry for the delay in answering your questions!

Cannot read property 'atlas' of undefined

This looks like configuration issues, have a look at the development settings

[React Intl] Missing locale data for locale: "undefined". Using default locale: "en" as fallback.

Again, I would bet on configuration issues... look here

The way the app looks for configurations is looking in the config/client/ folder for a file with the same name as the environment set in NODE_ENV

Hope this sheds some light on the issues you're having!

from nicistore.

@manojsinghnegiwd in regards to routing... what kind of information are you looking for?

They are imported here and then "used" in client.js or server.js according to whether the route is happening client-side or server-side, respectively.

from nicistore.

Hello @andreftavares I can commit my code and make a PR if you have time to help me out in this thing ... about routing I can't make sense how store have access to state .. ?

from nicistore.

you're wondering how server-side stated is passed to the client and how stores have access to it?

Exactly ... =D

from nicistore.

Yes I got that ... 😄 but at my homepage ... ProductsHomepageStore store rehydrate function is not get called ... CollectionsStore works fine ... When exactly stores rehydrate function is get called ?

from nicistore.

And which function fetches which data ? ... can you explain client.js ... execution flow ... how it fetches data ? i pushed the code on github if you want to take a look https://github.com/manojsinghnegiwd/nicistore ... is there any difference between how collectionsStore fetch data vs how other stores fetch data ... because collectionsStore seems to work ... this is my context object ... and it is just passing things used by collectionsStore

from nicistore.

I got all that .. the thing with nicistore client router is that it calls fetchData on every route change ... but with react router new version I am not able to that ... as much I know i have to use react-router onEnter event to achieve the same functionality you used to call fetchdata ... the problem with onEnter is that I am not able to pass it in ... React.createElement .. the only way I can pass onEnter is passing it in the routes.js ... but you used context to fetch data ... which is not available in the routes.js ... so I am kind of loop in here .. if I am doing anything wrong and you have any better way to do that .. or work around this problem ... please enlighten me 😄

from nicistore.