Javascript 在``中为…使用``实现组合减速机?
在的第16课中,我尝试实现我自己的combineReducers函数,然后才了解Dan是如何实现的。我做到了以下几点。我试着用Javascript 在``中为…使用``实现组合减速机?,javascript,redux,Javascript,Redux,在的第16课中,我尝试实现我自己的combineReducers函数,然后才了解Dan是如何实现的。我做到了以下几点。我试着用来。。。在子减速器(todos,visibilityFilter)上,以类似方式传入 const combineReducers = (reducers) => { return (state,action) => { let temp = {}; for (let i in reducers) { temp[i] = r
来。。。在子减速器(todos
,visibilityFilter
)上,以类似方式传入
const combineReducers = (reducers) => {
return (state,action) => {
let temp = {};
for (let i in reducers) {
temp[i] = reducers[i](state,action)
}
return temp;
}
}
这是行不通的。当我使用expect库测试它时,我在控制台中收到以下错误。奇怪的是,如果我没有弄错的话,它看起来像是从调用todos
reducer到调用visibilityFilter
reducer的状态被嵌套在了一起。这很奇怪,因为我的代码显示它们在返回的对象中是明显独立的字段
未捕获错误:应为{todos:[{已完成:false,id:1,文本:
'Go shopping'}],visibilityFilter:{todos:[{completed:false,
id:0,文本:'Learn Redux'}],visibilityFilter:'SHOW_ALL'}}to
等于{todos:[{completed:false,id:0,text:'Learn Redux'}{
已完成:false,id:1,文本:'Go shopping'}],visibilityFilter:
“全部展示”}
我的测试代码是
const testTodoApp = () => {
const stateBefore = {
todos: [{id: 0, text:'Learn Redux', completed: false}],
visibilityFilter: 'SHOW_ALL',
};
// action is an object. with a defined type property.
const action = {
type: 'ADD_TODO',
id: 1,
text: 'Go shopping',
};
const stateAfter = {
todos: [{id: 0, text:'Learn Redux', completed: false},
{id: 1, text:'Go shopping', completed: false},
],
visibilityFilter: 'SHOW_ALL',
};
deepFreeze(stateBefore);
deepFreeze(action);
expect(
todoApp(stateBefore, action)
).toEqual(stateAfter);
console.log("Test passed: todoApp")
}
testTodoApp();
如果我使用内置组合减速机,此测试将通过。
子减速器和对组合减速器的调用如下所示:
const todo = (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;
}
return {
...state, completed: !state.completed,
};
default:
return state;
}
}
const todos = (state=[], action) =>{
switch (action.type) {
case 'ADD_TODO':
console.log('ADD_TODO switch selected')
return [
...state,
todo(undefined,action),
];
case 'TOGGLE_TODO':
console.log('TOGGLE_TODO switch selected')
return state.map( t => todo(t, action))
default:
console.log('default switch selected')
return state;
}
}
const visibilityFilter = (
state = 'SHOW_ALL',
action
) => {
switch (action.type) {
case 'SET_VISIBILITY_FILTER':
return action.filter;
default:
return state;
}
}
const todoApp = combineReducers({
todos,
visibilityFilter,
})
我的问题是:
我的代码中是什么导致了一个减速器嵌套在另一个减速器中
我意识到Dan使用了reduce
,但是出于教学方面的原因,我该如何使用来。。。在
模式中实现组合减速机李>
在那之后,你能评论一下使用作为。。。在
中,对于此类应用程序,如果这是一种不好的模式,那么是什么使其如此呢
我刚刚意识到,必须向todos
reducer和visibilityFilter
reducer传递与其键对应的组合状态部分,而不是整个组合状态。所以工作代码应该是这样的,在第5行中,我向状态的相应部分添加了一个对象访问器
const combineReducers = (reducers) => {
return (state,action) => {
let temp = {};
for (let i in reducers) {
temp[i] = reducers[i](state[i],action)
}
return temp;
}
}