Geek Answers Handbook

Removing an item from the list of abbreviated values ​​and redirecting back to the list - delay tracking?

I have a view with a list of steps. Each step can be “viewed” and “deleted” from the “view” screen. My StepDetails component communicates with the redux repository by selecting the appropriate step from the steps of the repository part using simple steps.find(...) :

 const mapStateToProps = (state, ownProps) => { let stepId = ownProps.params.stepId; let step = state.steps.find(s => s.id === stepId); return {step}; };

Now, when (from the inside of "details") I click "Delete Step", I want this step to be removed from the repository, and I want to go to the list view.

When deleting, the reducex action occurs, which returns a new list of steps without deleting this object and redirection is called later:

 const deleteStep = (stepId) => { return dispatch => { return stepsApi.deleteStep(stepId).then(steps => { dispatch(action(STEPS_LIST_CHANGED, {steps})); // react-router-redux action to redirect dispatch(redirectToList()); }) } };

This is good and does what I want with one drawback: when the STEPS_LIST_CHANGED action is STEPS_LIST_CHANGED and the step is removed from the list, my mapStateToProps component mapStateToProps called before this redirect. The result is that mapStateToProps cannot explicitly find this step anymore, and my component gives me errors, that the step is undefined, etc.

What I can do is to check if the step provided to the component is defined and if it does not display anything, etc. But this is a kind of protective programming code, which I do not really like, because I do not want my component to know what to do if it receives incorrect data.

I can also change the order of sending orders: first redirect and then change the state, but then it is also not very good (logically you want to delete first and then redirect).

How do you handle such cases?

EDIT: What I ended up with was putting this null / undefined -check into the container component (the one that does the reduction wiring). With this approach, I do not clutter up my information components with unnecessary logic. It can also be abstracted to a component of a higher order (or perhaps an ES7 decorator), to render null or <div></div> when some of the required details are missing.

+6
source share
2 answers

I can imagine two approaches:

  • List delegation changed to redirection? For instance:

     dispatch(redirectToList(action(STEPS_LIST_CHANGED, {steps})));

  • Zero-step component processing to ignore rendering:

     shouldComponentUpdate: function() { return this.state.steps != null; }
0
source

You can change the return statement to an array

 const mapStateToProps = (state, ownProps) => { let stepId = ownProps.params.stepId; let step = state.steps.find(s => s.id === stepId); return step ? [{step}] : [] };

So on your component you can do step.map() and display it.

0
source

More articles:


All Articles