I'm building a React application w/ Redux and in the mapDispatchToProps function - I'm using the pattern below.
const mapDispatchToProps = (dispatch) => {
debugger
Object.keys(actions).forEach(key => {
var functionObj = actions[key];
actions[key] = () => {
debugger
var zz = Array.prototype.slice.call(arguments);
dispatch(functionObj.apply(null,zz));
}
});
return actions;
}
Whats driving me bananas is that the arguments object is what I expect it to be (Array like object with the parameters bla bla) except when I "use" it in any way. By "use" I mean:
Assign it to something (like var zz above) OR pass it to a function. When I "use" the arguments object - it magically becomes the current Webpack module that I am currently in.
Does anyone know anything about this? Am I crazy??
This is caused by the fact that arrow functions do not provide an arguments object. So you are referencing the module wrapper function, which is the nearest non-arrow function.
You can fix this by using rest parameters instead. Good riddence! Rest parameters are a true array and do not need to be converted with any Array#slice() nonsense.
Below is an example, where I also used the spread operator to avoid the need to use Function#apply(), since you don't seem to need any special this value.
const mapDispatchToProps = (dispatch) => {
debugger
Object.keys(actions).forEach(key => {
var functionObj = actions[key];
actions[key] = (...zz) => {
debugger
dispatch(functionObj(...zz));
}
});
return actions;
}