react开发教程（九）redux基础

muzhuyu 发布于2019-08-21 17:53 / 2532人阅读

摘要：案例代码定义计算规则，即个商品价值恋人结算完成，当前购物车为空单身狗根据计算规则生成定义数据即变化之后的派发规则触发数据变化上一篇开发教程八组件通信下一篇开发教程十结合

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

服务器托管云服务器 react-redux React_Redux_Appointm react-router-redux 软件开发基础教程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90163.html

react开发教程（十）redux结合react

摘要：描述和之间没有关系。但是还是比较适合和搭配的，因为允许你以的形式来描述界面，而非常擅长控制的变化。应用中应有且仅有一个。只需要在渲染根组件时使用即可。创建上一篇开发教程九基础描述 Redux 和 React 之间没有关系。Redux 可以搭配 React、Angular 甚至纯 JS。但是 Redux 还是比较适合和 React 搭配的，因为 React 允许你以 state 的形式...

jsliang 2019-08-02 15:58 评论0 收藏0
react开发教程（十）redux结合react

摘要：描述和之间没有关系。但是还是比较适合和搭配的，因为允许你以的形式来描述界面，而非常擅长控制的变化。应用中应有且仅有一个。只需要在渲染根组件时使用即可。创建上一篇开发教程九基础描述 Redux 和 React 之间没有关系。Redux 可以搭配 React、Angular 甚至纯 JS。但是 Redux 还是比较适合和 React 搭配的，因为 React 允许你以 state 的形式...

yck 2019-08-21 17:53 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0