react开发教程（九）redux基础

Readux基础

什么是redux？

简单点回答就是，一个管理数据的全局对象，可是它有单一状态树的概念，所谓的单一状态树，就是指“全部的 state都以一个对象树的形式储存在一个单一的 store 中。”

页面中的全部状态或者数据，都应该用这种状态树的形式来描述；页面上的任何变化，都应该先去改变这个状态树，而后再经过某种方式实现到页面上。

或者换句话说，咱们要作的核心工做，就是用单个对象去描述页面的状态，而后经过改变这个对象来操控页面。

使用场景

不管是移动端仍是 pc 端，当你使用 React 或者 vue 开发组件化的 SPA 程序时组件之间共享数据（状态）共享自己就是一个问题，既然是共享的那么就没有必要在每一个组件中都从新获取，所以每一个系统都须要一个管理多组件使用的公共信息的功能，这就是 Redux 的做用。

核心概念

Action：是把数据从应用传到 store 的有效载荷，通俗一点就是描述一个动做
好比：
你的女友给你发了个消息，消息的内容就是，"快去给我清空购物车"， 那么这个内容在redux中就是action的意思

Reducer：Action 只是描述了有事情发生了这一事实，并无指明应用如何更新 state。而这正是 reducer 要作的事情。 通常称其为规则
好比：
你女友已经给你发完消息了，可是只是一个消息，你是执行者，你是怎么执行的他不关心，那么你执行的这个过程就是reducer，为何叫规则那，由于你执行的这个过程本就是规则，你先得有钱，而后登陆他的账号，而后结算

Store：Store 就是把 Reducer 和 action 联系到一块儿的对象。
Store 有如下职责：
维持应用的 state；
提供 getState() 方法获取 state；
提供 dispatch(action) 方法更新 state；
经过 subscribe(listener) 注册监听器；

安装

若是单纯使用 Redux 仅仅安装 Redux 便可，执行npm install redux --save，不过在 React 中使用 Redux 确定会用到 react-redux 这一工具，所以这里一块儿安装完，执行npm install react-redux --save。

案例代码

// 定义计算规则，即 reducer
function BoyFriend(state = {
  cart: '10个商品价值100000000',
  relationship: '恋人'
}, action) {
  switch (action.type) {
    case 'JIEZHANG':
      state.cart = "结算完成，当前购物车为空"
      return state
    case 'FENSHOU':
      state.relationship = '单身狗'
      return state
    default:
      return state
  }
}

// 根据计算规则生成 store
let store = createStore(BoyFriend)

// 定义数据（即 state）变化以后的派发规则
store.subscribe(() => {
  console.log('current state', store.getState())
})

// 触发数据变化
store.dispatch({ type: 'JIEZHANG' })
store.dispatch({ type: 'JIEZHANG' })
store.dispatch({ type: 'FENSHOU' })

上一篇：react开发教程（八）React组件通讯
下一篇：react开发教程（十）redux结合react