Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
  • Feb 23 00:49
    qdouble removed as member
  • Feb 23 00:49
    govi2010 removed as member
  • Feb 23 00:49
    lanovoy removed as member
  • Feb 23 00:49
    d3viant0ne removed as member
  • Feb 23 00:49
    shlomiassaf removed as member
  • Feb 23 00:49
    mastertinner removed as member
  • Feb 23 00:49
    colinskow removed as member
  • Feb 23 00:49
    matthewdenobrega removed as member
  • Feb 23 00:49
    dotcs removed as member
  • Feb 23 00:49
    DanWahlin removed as member
  • Feb 23 00:49
    Foxandxss removed as member
  • Feb 23 00:49
    niieani removed as member
  • Feb 23 00:49
    katallaxie removed as member
  • Feb 23 00:49
    kentcdodds removed as member
  • Feb 23 00:49
    jeffbcross removed as member
  • Feb 23 00:49
    jimthedev removed as member
  • Feb 23 00:49
    carlosliu removed as member
  • Feb 23 00:41
    PatrickJS commented #1686
  • Feb 22 22:23
    kamil-kielczewski commented #1686
  • Feb 22 22:23
    kamil-kielczewski commented #1686
Steven Demurjian Jr.
@sdemurjian
when in development mode, how do i serve the webpack assets with a custom server (not using webpack servers)? since they are not stored on the file system
right now i have a development server that acts only as an API server on a different port, and when in production i serve the compiled bundles
pigeont
@PigeonT
hi, how to use angular2 with webpack together?
I need some help
Are u using webpack or systemjs?
Dan Cancro
@dancancro

Hi all. I'd like to make an app with Angular 2 and Redux. How do practitioners of this starter use it with Redux?

From my view of other Angular2+Redux starters, I get the feeling that it totally changes the structure of an app from files being grouped by feature to being grouped by file type.

Marinho Brandão
@marinho
hi @dancancro , this is the structure I have (different than standard suggested by Redux team):
src
src/app
src/app/store
src/app/store/feature1
src/app/store/feature1/feature1.actions.ts
src/app/store/feature1/feature1.reducers.ts
src/app/store/feature1/feature1.state.ts
src/app/store/feature1/feature1.models.ts
*.models.ts only when necessary
Dan Cancro
@dancancro
@marinho are there any specific reasons for your departure from their way?
Marinho Brandão
@marinho

inside store, I have also:

src/app/store/app.state.ts
src/app/store/reducers.ts

both grouping the others respective feature files

by this way, each feature is self contained as one package, it looks more organised and scalable
(scalable in terms of file structure)
other key information: angular2-webpack-starter has a app.state.ts to manage the HMR state, but it has nothing to do with the Redux’ app state interface… I suggest you to rename it to prevent confusion
Dan Cancro
@dancancro
where would you put feature1's component, module, template, and css files?
Marinho Brandão
@marinho
they aren’t part of the global state, they go to the normal places they would be
the idea is to keep everything under Redux’ domain inside src/app/store as that defines the app’s global state
Dan Cancro
@dancancro
so you have some feature1 files under src/app/store/feature1 and others under, src/app/feature1? what sort of havok would it cause if you put all of feature1's files in src/app/feature1?
Marinho Brandão
@marinho
you can do that too, no issue, but then you start to mix global state with components, which goes against the idea of a component-oriented approach
because when I say “feature1”, I don’t mean “feature1.component”’s state… what I mean is a feature from the state point of view, which mostly don’t coincide with feature structure
Dan Cancro
@dancancro
hmm, to me putting all things concerned with a component in one place complies with component-orientation better. no?
Marinho Brandão
@marinho

for example, you may have

  • home.component
  • kpis.component
  • map.component
  • sites-list.component

and then your global state is:

  • towns
  • sites
  • buildings
  • aggregations

so, just because some features will coincide in name with state keys, it doesn’t mean that’s a rule

nope, because the global state isn’t part of the component … it is like an external API the component uses as a third party service
Dan Cancro
@dancancro
ah ok so there are two different sets of 'components' - visual ones and state ones. is that right?
Marinho Brandão
@marinho
what would be a state component?
Dan Cancro
@dancancro
towns
Marinho Brandão
@marinho
nope, towns is just a simple JS array with a couple of JS objects with data
there’s no component inside the state
you must think of the state as a database… it provides data for the components, but the structure isn’t the same
Dan Cancro
@dancancro
i think i got it
Marinho Brandão
@marinho

:) in my example case:

  • towns, sites and buildings would be used by map.component
  • aggregations would be used by kpis.component
  • sites would be used by sites-list.component

so, some state keys are used by multiple components or the other way around

Dan Cancro
@dancancro

ok. would this be more accurate then?

src/app
src/app/store
src/app/store/entityType1
src/app/store/entityType1/entityType1.actions.ts
src/app/store/entityType1/entityType1.reducers.ts
src/app/store/entityType1/entityType1.state.ts
src/app/store/entityType1/entityType1.models.ts

and

src/app
src/app/feature1
src/app/feature1/feature1.module.ts
src/app/feature1/feature1.component.ts
src/app/feature1/feature1.template.ts
src/app/feature1/subfeature/
src/app/feature1/...
Marinho Brandão
@marinho
yep, true… I probably should have avoided the word “feature1” in my example… yours is better
other I suggest from my experience: ng2-redux + Redux.js has an advantage over ngrx: as they use the standard libraries, you can make use of middleware and Chrome Extensions. I don’t know ngrx well, but I’m very happy using some middleware and chrome things
Dan Cancro
@dancancro
i started with ng2-redux but the community is much smaller. it was taking a week to get an answer to a simple question
the ngrx example app works with the developer tools http://ngrx.github.io/example-app
Marinho Brandão
@marinho
well, you can grab some knowledge from ReactJS community though… it’s the same Redux.js… so it works the same way
hummm, just tried and my DevTools tab didn’t work as it does with ng2-redux
I see the black sidebar included in the website working but not the chrome extension in devtools
oops, jsut force-reloaded and it works now… odd
Dan Cancro
@dancancro
it's flakey for me too.
how do you feel about Immutable.js? I had a real struggle working with it when i was trying ng2-redux then asked about it on the ngrx board and was told it was unnecessary complexity
Marinho Brandão
@marinho
I’m using seamless-immutable instead
initially because the legal department on my job blocked ImmutabeJS as it has a patent trap…
but after I realized seamless-immutable is also better because it respects the exact object signature… you can use the arrays and objects with the exact same methods and they work perfectly, while with ImmutabeJS everything is different from standard
Dan Cancro
@dancancro
no kidding? there's a hard to find gotcha
Marinho Brandão
@marinho
what do you mean?
Dan Cancro
@dancancro
whether something has a patent problem is probably not very easy for average folks to find out while they drown in the rest of the variables https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.87gsjlb8b
Marinho Brandão
@marinho
hahaha, nice article, just read it few days ago :P
I wouldn’t find it myself either, but in my work there’s a huge legal department analysing every single OSS library/package we request… React and Immutable were caught