MagicBox is a middleware for Redux. It's main job is to filter the action's data.

################################# INTRO #####################################

With the help of MagicBox you can manipulate the action's data before providing it to the reducer. Other actions which are not provided in the template would be untouched.

Use Case : Suppose you have a field named "friends" which is an array and your code is working fine but after sometime your backend broke and "friends" is now coming as null. If you have provided validation for that field it will work fine but suppose you have more than one component and you definitely would be having 100s of fields, validation at each level would be very tedious job. Here comes MagicBox into play. Just provide the template to the MagicBox and if anything other then you are expecting, would be removed and will be updated with the value

Follow below steps to use it.

1. import magicbox in your code // import {magicbox} from "magicbox"

2. Make a feed as shown below const dummyFeed = { "SET_NOTIFICATIONS":{ data:{ type:"object", required: true, default:{notifications:[], newNotificationCount:0}, inner_fields:{ notifications:{ type:"array", required: true, default:[], inner_fields:{ inisied_arr:{ type:"object", required: true, default:{}, inner_fields:{ type:{ type:"number", required: true, default:1, }, meta:{ type:"object", required: true, default:{}, inner_fields:{ friend:{ type:"object", required: true, default:{}, inner_fields:{ name:{ type:"number", required: true, default:124421
   } } } } } } } } }, name:{ type:"object", required: true, default:{}, } } } } }

   Give action name as the key and then provide the name of the fields as key on which you want to provide validations. For a particular field you can also add validations on nested children.

   For a field we can following properties

    type:"object",
    required: true,
    default: {}
    inner_fields:{
   
    }

   a) type: Can be any type supported by JS ["array","object","number","undefined","null","string"] b) required : If set true then only the field's value is updated and if you are setting this as true then "default" should be provided. c) default : In case of type mismatch the field is updated with this value d) inner_fields : If you want to do validation on child eg. array of objects or objects inside object. Provide this field, same properties has to be provided

    eg.             inner_fields:{
                                age:{
                                    type:"number",
                                    required: true,
                                    default:1,
                                },
                            }

3. Argument 2 is optional, if provided should be a function which will catch the messages sent by the middleware e.g let logger = (a)=>{console.log("MAGICBOX:",a)}

4. Pass the arguments as shown below to magicbox const store = createStore(reducer,applyMiddleware(magicbox(dummyFeed,logger)))

Now, You are good to go.

OPERATION ON ARRAY : If you want to do validation on array MagicBox supports operation on homogeneous array, just provide one field inside "inner_fields" and same will be validated against each element of an array.

e.g notifications:{ type:"array", required: true, default:[], inner_fields:{ inisied_arr:{ type:"object", required: true, default:{}, } } } // Here each element of notification will be validated with inner_fields

Upcoming feature: a) templateValidator - It will validate the template feeded by you into the middleware.