redux重构（四）02-控制全选状态——arr.every()-判断数组中是否所有元素都满足条件，如果都满足就返回true，否则返回false & every()-一假即假& some()-一真即真

控制全选状态——arr.every()-判断数组中是否所有元素都满足条件，如果都满足就返回true，否则返回false & every()-一假即假 & some()-一真即真

src/views/List.js

let {toggleAll} = this.props

<label onClick={toggleAll.bind(null, isAll)} htmlFor="toggle-all">全部标记为完成</label>

toggleAll: (isAll) => {
    // console.log(isAll)   //false
    // 控制所有列表项切换
    let action = Actions.toggleAllAction(isAll)
    dispatch(action)
},

在src/store/ActionCreator.js中

/*
  ActionCreator 本质上是函数，用于创建Action

  Action的本质是一个普通对象
*/

export const addTaskAction = (etitle) => {
  return {
    type: 'todos_add',
    etitle: etitle
  }
}

export const deleteTaskAction = (id) => {
  return {
    type: 'todos_delete',
    id: id
  }
}

export const toggleItemAction = (id) => {
  return {
    type: 'todos_toggle_item',
    id: id
  }
}

export const toggleAllAction = (isAll) => {
  return {
    type: 'todos_toggle_all',
    flag:isAll
  }
}

在src/views/List.js

//全选按钮的状态
function mapStateToProps (state) {
  // 动态计算全选按钮的状态：如果所有的条目都被选中，那么全选按钮的状态就是true,只要有一个没有选中就是false
  // 数组的方法every作用：判断数组中是否所有元素都满足条件，如果都满足就返回true，否则返回false
  let isAll = state.todos.every(item => {
    return item.done
  })
  return {
    // 从唯一的数据源当中获取状态数据即可
    todos: state.todos,
    isAll: isAll
  }
}

toggleAll: (isAll) => {
  // 控制所有列表项切换
  let action = Actions.toggleAllAction(isAll)
  dispatch(action)
}

• 数据变更

src/store/Reducer.js

case todos_toggle_all:

// 控制所有列表项切换:
newState = JSON.parse(JSON.stringify(state))
newState.todos.forEach(item => {
  item.done = !action.flag
})
return newState

全选状态-效果