I'm having view with list of Steps. Each step can be "viewed" and "removed" from within the "view" screen. My StepDetails component binds to redux store by fetching corresponding step from steps part of store with simple steps.find(...):
This is fine and does what I want, with one drawback: when STEPS_LIST_CHANGED action is called and step gets removed from the list, my component's mapStateToProps gets called before this redirect. Result is that mapStateToProps cannot obviously find this step anymore and my component gives me errors that step is undefined etc.
What I can do is to check if step provided to component is defined, and if not render nothing etc. But it's kind of defensive programming flavor I don't really like, as I don't want my component to know what to do if it gets wrong data.
I can also swap actions dispatch order: redirect first and then alter state, but then it doesn't feel right too (logically you first want to delete and then redirect).
How do you handle such cases?
EDIT: What I ended up with was to put this null/undefined-check into container component (one that does redux wiring). With that approach I don't clutter my presentational components with unnecessary logic. It also can be abstracted out to higher order component (or ES7 decorator probably) to render null or <div></div> when some required props are not present.