0

I'm building something with Angular and using .

My object has objects that have certain values. Lets pretend:

name: "john",
sex: "m"
children: [
  {
  name: "joe",
  sex: "m"
  children: [
    {
    name: "mary",
    sex: "f"
    children: [
      {
      name: "ryan",
      sex: "m"
      children: []
      }
    ]
    }
  ]
],
name: "sue",
sex: "f"
children: [
  {
  name: "joe",
  sex: "m"
  children: [
    {
    name: "mary",
    sex: "f"
    children: [
      {
      name: "ryan",
      sex: "m"
      children: []
      }
    ]
    }
  ]
]

Lets say I want to:

  1. count the amount of total children and grandchildren that john has.
  2. count the number of grandchildren that john has.

Well then:

  1. Where would I write the function for this when using Angular/Redux? Would I do it before I get my state? After I make my API call and get my state? In the reducer? In the component?
  2. What is the fastest/best way to iterate and get those 2 counts that I wanted? Because I know Angular has some built in things, would it have any faster way to do this? Or through plain JS?

And last point:

  1. Lets say I have some sibling component (john's wife, sue) that will be using this similar count or information. If I want to keep my code DRY, where should I be making these count functions?

Do I use my state from before if some information count is going to be different? Lets say this is only counting female children/granddaughters. And john's is for male children/grandsons.

Or should I be making two slice of state for these (m & f) and working off those?

File Structure:
app
 |store
   |actions
   |models
   |reducers
   |effects
 |views
   |john
     |.html
     |.ts
   |sue
     |.html
     |.ts
 |app.ts etc
Yeheshuah
  • 1,216
  • 1
  • 13
  • 28
bequr
  • 19
  • 5

1 Answers1

0

I think a lot of your points can be answered by using selectors.

https://ngrx.io/guide/store/selectors

1.) You can make many selectors. Maybe you can make a selector that takes the input of the name (string) and can give you the number of children it has. And another selector that gives you the number of grandchildren this name has. You can then combine it in your component. Maybe you can make one selector that counts both of them. It's up to you.

2.) Answered in 1.

3.) You would write it as a selector in maybe selectors.ts inside of the store folder and can then pass these selector functions in the select argument of the store.

4.) The fastest and best way will be through using plain JS or a JS library like lodash. Angular has a lot of stuff built in but it is a UI/View library, not a make common JavaScript operations faster library.

5.) I would have one slice of state and like mentioned previously using selector functions to transform the state into the data I am interested in.

AliF50
  • 16,947
  • 1
  • 21
  • 37
  • Hey! Thanks for your response. I just made an edit where I would be doing male and then female. (My actual project is a bit bigger in scope where I would branch off multiple times) Would you still have one slice of state and use selector functions? But either way, I will read up on selectors right now. Thanks a lot for your help! :) – bequr Mar 13 '20 at 01:09
  • Yes, I personally would. You can think of the selectors as `getter` functions. – AliF50 Mar 13 '20 at 01:10
  • Thanks. So I have a bunch of different components that might use 2-4 different selectors each or maybe sometimes the same ones. Would you make a component-name.selector for each component? Or just one big general selector.ts? Also side question - I currently don't have an index.ts. I just added my different reducers into my StoreModule.forRoot({}) in my app.module. Is this bad practice? – bequr Mar 13 '20 at 01:16
  • Check out StoreModule.forFeature to register each feature reducer as features. I would put all selector functions in selectors.ts and export them and then import where necessary. – AliF50 Mar 13 '20 at 02:18