我正在尝试了解Dan Abramov发布的Redux在线教程。 目前我在以下样本:
Reducer composition with Arrays
以下示例遵循以上示例:
// Individual TODO Reducer
const todoReducer = (state, action) => {
switch(action.type) {
case 'ADD_TODO':
return {
id: action.id,
text: action.text,
completed: false
};
case 'TOGGLE_TODO':
if (state.id != action.id) return state;
// This not working
/*
return {
...state,
completed: !state.completed
};
*/
//This works
var newState = {id: state.id, text: state.text, completed: !state.completed};
return newState;
default:
return state;
}
};
//TODOS Reducer
const todos = (state = [], action) => {
switch(action.type) {
case 'ADD_TODO':
return [
...state,
todoReducer(null, action)
];
case 'TOGGLE_TODO':
return state.map(t => todoReducer(t, action));
default:
return state;
}
};
//Test 1
const testAddTodo = () => {
const stateBefore = [];
const action = {
type: 'ADD_TODO',
id: 0,
text: 'Learn Redux'
};
const stateAfter = [{
id: 0,
text: "Learn Redux",
completed: false
}];
//Freeze
deepFreeze(stateBefore);
deepFreeze(action);
// Test
expect(
todos(stateBefore, action)
).toEqual(stateAfter);
};
//Test 2
const testToggleTodo = () => {
const stateBefore = [{id: 0,
text: "Learn Redux",
completed: false
}, {
id: 1,
text: "Go Shopping",
completed: false
}];
const action = {
type: 'TOGGLE_TODO',
id: 1
};
const stateAfter = [{
id: 0,
text: "Learn Redux",
completed: false
}, {
id: 1,
text: "Go Shopping",
completed: true
}];
//Freeze
deepFreeze(stateBefore);
deepFreeze(action);
// Expect
expect(
todos(stateBefore, action)
).toEqual(stateAfter);
};
testAddTodo();
testToggleTodo();
console.log("All tests passed");
问题是,在todoReducer函数中,以下语法不起作用:
return {
...state,
completed: !state.completed
};
我使用的是Firefox 44.0版,它在控制台中显示以下错误:
Invalid property id
现在我想我当前版本的Firefox必须支持Spread运营商。 如果它没有,是否有任何方法可以添加一些独立的Polyfill来支持这种语法?
这也是JSFiddle
答案 0 :(得分:7)
The object spread syntax is not supported in most browsers at the minute。它建议在ES7(又名ES2016)中添加。据我所知,没有办法对它进行填充,因为它使用的是新语法,而不仅仅是函数调用。
在此期间你有两个选择。
1)使用Object.assign
创建对象的更新版本,如下所示:
Object.assign({}, state, {
completed: !state.completed
});
虽然这也需要在大多数浏览器中进行填充 - a good example one is available on MDN,或者您可以使用第三方库的版本like the one in lodash。
2)使用Babel等转换工具,它们允许您使用更新的语法编写代码,然后将其转换为适用于所有浏览器的版本。
答案 1 :(得分:2)
如果使用Babel的任何人仍然遇到问题,开箱即用的Babel可能无法使用此功能,您可能需要添加插件:http://babeljs.io/docs/plugins/transform-object-rest-spread/
然后用
更新.babelrc“plugins”:[“transform-object-rest-spread”]
答案 2 :(得分:1)
您无法填充语法。如果您希望在当前浏览器中执行,则需要使用像babel这样的东西来编译为旧版本的JavaScript。