[Redux] Reducer Composition with Arrays

In the previous lesson we created a reducer so can handle the actions, adding a new to-do, and toggling an existing to-d O. Right now, the code to update the to-do item or to create a new one are placed right inside of the to-dos reducer.

This function was hard to understand because it makes us-different concerns, how the to-do's array is updated, and how Individual to-dos is updated. A problem unique to Redux. Any time a function does too many things, you want to extract other functions from it, and call them so that every functio n only addresses a single concern.

In the this case, I decided the creating and updating a to-do in response to an action are a separate operation, and needs to be handled by a separate function called to-do. As a matter of convention, I decided that it should also accept II arguments, the current trait and the action being disp Atched, and it should return the next trait.

It is the trait refers to the individual to-do, and the least of to-dos. Finally, there is no magic in Redux to make it work. We extracted the to-do reducer from the to-dos reducer, so now we need to call it for every to-do, and assemble the result s into an array.

While the-is isn't required in this particular example, I suggest so always has the default case where you return th E current trait to avoid all [inaudible 1:36] on the future. The part described in this lesson are pervasive in Redux ' s development, and is called reducer composition.

Different reducers Specify how Different parts of the trait tree is updated in response to actions. Reducers is also normal JavaScript functions, so they can call other reducers to delegate and abstract a a-to handling of updates of some parts of this tree they manage.

This pattern can being applied many times, and while there are still a single top level reducer managing the state of the Your app , you'll find it convenient to express it as many reducers call in each of the contribution to a part of the Applic ations trait tree.

Let Todo = (state, action) = = {  Switch(action.type) { Case' Add_item ':        return{text:action.text, id:action.id, completed:false        };  Case' Toggle_item ':        if(State.id!==action.id) {          returnState ; }Else{         return{... state, completed:!state.completed//Would overwirte the State object ' s completed prop        }; }    default:          returnState ; }}let Todos= (state = [], action) = = {    Switch(action.type) { Case' Add_item ':      returnState =[... state, Todo (undefined, action)];  Case' Toggle_item ':      returnState.map ((t) =Todo (T, action))default:      returnState ; }};let Testtodo_additem= () + ={Let Statebefore= []; Let action={type:' Add_item ', Text:' Learn Redux ', ID:0  }; Let Stateafter=[{text:' Learn Redux ', ID:0, Completed:false,    }  ];  Deepfreeze (Statebefore);    Deepfreeze (action); Expect (Todos (Statebefore, Action)). Toequal (stateafter);}; Let Testtodo_toggleitem= () + ={Let Statebefore=[{text:' Learn Redux ', ID:0, Completed:false}, {text:' Learn Angular2 ', ID:1, Completed:false    }  ]; Let action={type:' Toggle_item ', ID:1  }; Let Stateafter=[{text:' Learn Redux ', ID:0, Completed:false}, {text:' Learn Angular2 ', ID:1, Completed:true    }  ];  Deepfreeze (Statebefore);    Deepfreeze (action); Expect (Todos (Statebefore, Action)). Toequal (Stateafter);} Testtodo_toggleitem (); Console.log ("All tests passed!");

[Redux] Reducer Composition with Arrays