五分钟带你回顾Redux工做流

Redux工做流解析

Redux是什么

假设咱们的业务有三个嵌套的组件ABC 组件A想要传值给组件C 要先传递给组件B 交由B传递给C 在没有引入Redux的时候 咱们只能经过这种原始的方法来传递 这时候 咱们再假设 若是有一个 公共管理数据状态的地方 咱们每次传递值或者修改值 都从这个地方获取 那不论业务多复杂 组件嵌套多深 咱们均可以很方便的直接从这个管理仓库里 获取到咱们须要的数据 这就是Redux 一个 数据层的框架 或者说是一个 状态容器

了解Redux工做流

这张图很是清晰的描述了 Redux的工做流程 光看这一张图可能会有一点晦涩难懂 可是咱们能够换个说法 把整个工做流程想像成一个借书的过程

一我的来图书馆借书 他须要说一句话告诉管理员 要借什么书 管理员要根据他提供的信息 找到对应的书籍 而后拿给他 想象过这个过程之后 再来看这个过程

首先 React Component这个组件就是须要借书的人 同时Store就是这个图书馆的管理员 他须要告诉管理员 他要借什么书 那么这个Action Creators就是记录这个信息 而且告知管理员 同时管理员接收到这个信息之后 他须要查询管理手册 找到对应书籍 这个手册就对应Reducers

对应到实际开发到业务逻辑里 其实就是 View 建立了一个action 经过dispatch派发到Store 而后Store会自动转发到Reducers 那么Reduces就能够接收到这个action 同时根据action来处理业务逻辑 并返回给Store 那么接下来一块儿来看代码是如何实现的吧

使用Redux完成TodoList

ps:因为讲述的是Redux 因此掠过了基础的React组件部分

• 安装Redux npm install redux --save

• 再一次回想流程 咱们须要一个Store(图书馆管理员) 在src目录下新建一个Store文件夹 并建立index.js生成Store 接收一个reducer参数(对应图书馆管理员的管理手册) 有了手册才能够找到对应书籍对吧～

  // store.js
  import { createStore } from 'redux'
  import reducer from './reducer.js'
  const Store = creaeStore(reducer)
  复制代码

• 上面已经提到了咱们须要一个reducer 因此 咱们新建一个reducer.js 同时须要注意的是reducer.js是一个纯函数 上文已经提到过 这个文件是一个管理手册 也就说 存放了书籍的具体信息(须要被管理的数据)以及如何处理书籍(业务逻辑)

• reducer能够接收两个参数 一个是action 一个是state 默认状况下 同时能够定义一组须要被统一管理的数据 把这个须要被管理的数据赋值给state 至于action咱们一下子再聊

// reducer.js
const originData = {
  inputValue: '',
  list: []
}
export default const reducer = (state = originData, action) => {
  return state
}
复制代码

• 在组件内部引入Store 同时store提供了getState()这个API 可让咱们获取定义好的state 既然获取了数据 那么若是修改了数据 咱们也是须要让组件知道的 因此须要使用store提供给咱们的另外一个API subscribe 这里定义的handleStoreChange其实只作一件事 也就是再次从新获取state

// 获取store里的数据
import store from './Store/'
  constructor() {
    // 获取数据 
    this.state = store.getState()
    // 组件订阅store
    store.subscribe(this.handleStoreChange) 
  }
  handleStoreChange() {
    this.setState(store.getState())
  }
复制代码

• 执行到上面那一步咱们就能够在咱们的业务组件中使用redux了 在对应业务组件中引入这个Store 同时咱们再次回顾上问中的Redux工做流的那张图 当有了管理员(store) 而且有了管理手册之后(reducer)之后 咱们如今只差一步了 也就是告诉管理员 咱们须要借什么书(操做什么数据) 也就是组件向Store派发一个action的过程

// 组件派发action

// 组件对应的绑定事件
handleValueChange(e) {
  // 建立一个action type表示要作啥 value 表示须要传递的值
   const action = {
    type: 'change_input_value',
    value: e.target.value
  }
  store.dispatch(action) //store接收到事件之后 须要转发给reducers 交由reducers处理
}
复制代码

• 当代码写到这里 回头再去看一次上文提到的比喻 看看发生了什么 首先 借书人view/React Component经过一句话action告诉了管理员Store要借什么书 这个时候 管理员须要查阅手册 来返回对应的书newState 因此咱们回到reducer里看看 该怎么实现需求

  • 还记得以前定义reducer.js的时候 reducer函数接收的参数里有action么 这个action其实就是store自动转发给reducer的 因此咱们能够在reducer里拿到对应的action 而且根据action定义的type不一样 处理不一样的业务逻辑

  • 同时咱们还须要注意一点 在Redux之中 真正能够修改的数据的 其实只有Store 并非修改的方法写在reducer里 reducer就能够修改数据 因此咱们须要一个返回一个新值给到Store

const originData = {
  inputValue: '',
  list: []
}
//reducer.js
export default (state = originData, action) => {
if (action.type === 'change_input_value') {
  // 返回一个新的state
  const newState = JSON.parse(JSON.stringify(state))
  newState.inputValue = action.value
  return newState  // store会接收到这个newState 而且会把原有数据替换成该数据 真正有权修改数据的仍是Store自己
}
return state
复制代码

• 写到这里 其实咱们就完成了redux的初步使用 以及完整的讲解了redux的工做流程 完成了TodoList的第一个功能 顺利输入内容

• TodoList里剩下的两个功能就是 点击添加的时候 展现区域显示输入的值 以及在展现区域点击对应项 则能够删除对应项 其实也就是继续在组件内的对应函数里建立不一样的action 而且在reducer里对对应的action进行处理便可

• 待优化的点 能够建立action creators 统一管理action的建立 以及 actionTypes的定义 减小由于定义type时发生的拼写错误

加油 💯