0

We're working in Angular 4 project with RXJS and Redux for state management. Currently we're working on a Wizard feature. The wizard include 5 steps that every step is a reactive form by himself, and every step has sub reducer for handling his own state.

WizrdReducer:

{
  error: <handled by HOR>
  pending: <handled by HOR>
  warning: <handled by HOR>
  settings: <handled by sub-reducer>
  step1Subreducer: <handled by sub-reducer>
  step2Subreducer: <handled by sub-reducer>
  step3Subreducer: <handled by sub-reducer>
  step4Subreducer: <handled by sub-reducer>
  step5Subreducer: <handled by sub-reducer>
}

Every step dispatch an action that save the form value in the state. The wizard component perform the save operation in the last step, the save operation should collect all the values from the state(all sub reducers) and perform the REST operation for creating the Object. We read a lot of articles about the getstate() function and that we shouldn't use it for getting the state(Anti pattern, do you also think so?). Our current solution is to subscribe to every sub reducer in the state(step1SubReducer, Step2SubReducer) and assign these values to variables inside the wizard component, but it's looks like a workaround and will cause to many subscription to trigger events even if we only need it in our final step. Any suggestions?

Thanks!

Meitark
  • 111
  • 1
  • 1
  • 7

1 Answers1

0

you can combine all into one step reducer, when you leave a step you can unsubscribe to it

stepReducer=(state={steps:[{step1...},{step2...}]},action)=>{
  const {payload,type}=action
  const {step,data}=payload
  payload.data
  switch(action.type):
    case 'UPDATE_FORM':
   ... 
 }
Fan Cheung
  • 10,745
  • 3
  • 17
  • 39
  • Hi, I have one reducer that contains all the sub reducer how can it help me? i want to avoid this code: function onSave(){ redux.getState().subscribe(){here i will insert code that will create the REST object}. can i do it without the getState() function? – Meitark Feb 05 '18 at 17:20
  • getstate is not an anitpattern, it's only a getter. in Ngrx store we use select/getstate a lot to bind to data – Fan Cheung Feb 06 '18 at 06:28
  • what do you think about this link?https://stackoverflow.com/questions/34455996/is-using-getstate-in-redux-an-anti-pattern – Meitark Feb 06 '18 at 13:38
  • when you getstate your only excuting a getter, not going through any reducer. When you updating data, the reducer and and getstate are happening in the background all the time to keep the view updated. In react redux pattern state is global anyway, you normally map one of the state tree branch to corresponding component ( it's provided by redux api). I only used NGRX store in Angular so not sure about how the redux works in Angular, but it's just similar concept. We use store.select('yourbranch').subscribe() to get data or just map this directly to the view via async pipe. – Fan Cheung Feb 06 '18 at 15:18