Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/394.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在``中为…使用``实现组合减速机?_Javascript_Redux - Fatal编程技术网

Javascript 在``中为…使用``实现组合减速机?

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

在的第16课中,我尝试实现我自己的combineReducers函数,然后才了解Dan是如何实现的。我做到了以下几点。我试着用
来。。。在子减速器(
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;
    
      }
    }