Redux无废话笔记

ldy 2月前 ⋅ 30 阅读

Redux无废话笔记

实例

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>

/** Action Creators */
function inc() {
  return { type: 'INCREMENT' };
}
function dec() {
  return { type: 'DECREMENT' };
}

function reducer(state, action) {
  // 首次调用本函数时设置初始 state
  state = state || { counter: 0 };

  switch (action.type) {
    case 'INCREMENT':
      return { counter: state.counter + 1 };
    case 'DECREMENT':
      return { counter: state.counter - 1 };
    default:
      return state; // 无论如何都返回一个 state
  }
}

var store = Redux.createStore(reducer);

console.log( store.getState() ); // { counter: 0 }

store.dispatch(inc());
console.log( store.getState() ); // { counter: 1 }

store.dispatch(inc());
console.log( store.getState() ); // { counter: 2 }

store.dispatch(dec());
console.log( store.getState() ); // { counter: 1 }

</body>
</html>

Redux 与传统后端 MVC 的对照

Redux传统后端 MVC
store数据库实例
state数据库中存储的数据
dispatch(action)用户发起请求
action: { type, payload }type 表示请求的 URL,payload 表示请求的数据
reducer路由 + 控制器(handler)
reducer 中的 switch-case 分支路由,根据 action.type 路由到对应的控制器
reducer 内部对 state 的处理控制器对数据库进行增删改操作
reducer 返回 nextState将修改后的记录写回数据库

总结

  • store 由 Redux 的 createStore(reducer) 生成
  • state 通过 store.getState() 获取,本质上一般是一个存储着整个应用状态的对象
  • action 本质上是一个包含 type 属性的普通对象,由 Action Creator (函数) 产生
  • 改变 state 必须 dispatch 一个 action
  • reducer 本质上是根据 action.type 来更新 state 并返回 nextState函数
  • reducer 必须返回值,否则 nextState 即为 undefined
  • 实际上,state 就是所有 reducer 返回值的汇总(本教程只有一个 reducer,主要是应用场景比较简单)

Action Creator => action => store.dispatch(action) => reducer(state, action) => ~~原 state~~ state = nextState


全部评论: 0

    我有话说: