yield

function *gen(){
yield { type: 'todos/add',payload: 'Learn Dva1' };
yield { type: 'todos/add',payload: 'Learn Dva2' };
yield { type: 'todos/add',payload: 'Learn Dva3' };

}

// gen 是一个生成器，当执行的时候，并不执行 generator 函数体，而是返回一个迭代器。迭代器具有方法，每次调用 next() 方法，函数就执行到
语句的地方。next() 方返回一个对象，其中value属性表示 yield 关键词后面表达式的值，done 属性表示是否遍历结束。generator 生成器通过的配合实现流程控制，
上面的代码执行了三次 next() ，generator 函数体才执行完毕。

var g=gen();
g.next();

执行结果：

{value:{ type: 'todos/add',payload: 'Learn Dva3' },done:true}

Reducer

reducer 是一个函数，接受 state 和 action，返回老的或新的 state 。即：(state,action) => state

Effects

put

用于触发 action 。

yield put({ type: 'todos/add',payload'Learn Dva' });

call

用于调用异步逻辑，支持 promise 。

select

用于从 state 里获取数据。

其实call是可以不用的，下面这两种等价：

yield call(usersService.fetch,{ page });
yield usersService.fetch({ page });

例如：

  effects: {
    *fetch({ payload: { page = 1 } },{ call,put }) {
      const { data,headers } = yield call(usersService.fetch,{ page });
      // 异步更新数据后，data 和header会自动更新,即 迭代器是 从上往下执行的，
      yield put({
        type: 'save',payload: {
          data,total: parseInt(headers['x-total-count'],10),page: parseInt(page,},});
    },

Reduce 与Action区别

dispatching function 是一个用于触发 action 的函数，action 是改变 State 的唯一途径，但是它只描述了一个行为，而 dipatch 可以看作是触发这个行为的方式，而 Reducer 则是描述如何改变数据的。

reducers,effects和subscriptions组织 model

（1） : component 调用dispatch 触发 action ( type =namespace + method)调用 model .

（2）：model 调用service,通过（import service 方法）

（3）：service 调用后台接口

State值更新

原先 state对象

{ data: list,total,page }

{ ...state,list: listT,total: totalT }

实例

  reducers: {
    save(state,{ payload: { data: list,page } }) {
      return { ...state,list,page };
    },remove(state,{ payload: id }) {
      const listT = state.list.filter(item => item.id !== id);
      const totalT = state.total - 1;
      return { ...state,total: totalT };
    },

filter()

遍历数组，在每一项元素后面触发一个回调函数，通过判断，保留或移除当前项，最后返回一个新数组。

顾名思义就是过滤。

reducers/todos.js 24行

return state.filter(todo =>
        todo.id !== action.id
      )

state是个任务数组，filter()里面只有一个参数，就是个箭头函数，该函数只有一个参数是todo，也就是数组的每一项元素，箭头后面那个判断语句，如果返回true则保留当前项，反之移除当前项。

有的同学会问，todo.id !==action.id前为什么没有return，这是箭头函数的语法，箭头两端就是输入输出，不用写return。如果用es5的写法就是：

该代码段的作用是，过滤掉任务数组中，id与指定id相同的任务。返回一个新的任务数组

map()

遍历数组，在每一项元素后面触发一个回调函数，通过计算，返回一个新的当前项，最后返回一个新数组。

reducers/todos.js 29行

箭头后面的值是个三元运算符，也就是return的新元素。如果id匹配，则通过Object.assign()合并一个新的属性，也就是给todo添加或者重写一个text属性，属性值为action.text。

Object.assign()第一个参数是target，就是目标，第二个第三个以及后面的参数都是source，也就是拷贝的源，是不是很像jquery插件中的extend？

这个代码的作用是给数组中指定的任务更新text属性。

some()、every()

遍历数组，在每一项元素后面触发一个回调函数，通过判断，返回一个布尔值。some()是只要有一个满足判断，就返回true，every()是只要有一项不满足判断，就返回false。

components/MainSection.js 19 行

 const atLeastOneCompleted = this.props.todos.some(todo => todo.completed)

遍历任务数组，有一个任务的属性completed为true，就返回true。

reducers/todos.js 43行

const areAllMarked = state.every(todo => todo.completed)

遍历任务数组，每一项任务的completed属性均为true时候，返回true

reduce()

遍历数组，在每一项元素后面触发一个回调函数，经过计算返回一个累加的值。

components/MainSection.js 62行

const completedCount = todos.reduce((count,todo) =>
      todo.completed ? count + 1 : count,0
    )

...展开属性

reducers/todos.js 20行

return [
        {
          id: state.reduce((maxId,todo) => Math.max(todo.id,maxId),-1) + 1,completed: false,text: action.text
        },...state
      ]

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!