浅析Redux数据流

chaosx110 发布于2019-08-20 18:24 / 1298人阅读

摘要：原文地址数据流通过这张流程图，我们可以更好的理解和直接数据如何流通，关系如何映射。函数只是一个纯函数，它接收应用程序的当前状态以及发生的，然后返回修改后的新状态或者有人称之为归并后的状态。的更新意味着更新。

原文地址：https://github.com/YutHelloWo...

-- React Redux 数据流

通过这张流程图，我们可以更好的理解Redux和React直接数据如何流通，关系如何映射。

让我们一步步来了解图中的各个概念。

action & actionCreator

action creator 就是函数而已,负责构建一个 action （是的，action creator 这个名字已经很明显了）并返回它。通过几行简单的代码就可以解释清楚了！

const actionCreator = function () {
  return {
    type : "AN_ACTION"
  }
}

一般约定 action 是一个拥有 type 属性的对象。

console.log(actionCreator())
//  { type: "AN_ACTION" }

reducer

Reducer 函数只是一个纯函数，它接收应用程序的当前状态以及发生的 action，然后返回修改后的新状态（或者有人称之为归并后的状态）。Reducer 函数是 action 的订阅者。

const reducer = function (state = {}, action) {
  console.log("reducer was called with state", state, "and action", action);

  return state;
}

Store

以上，action描述“发生了什么”，而reducer根据action来更新state。但是他们两者之间是如何关联的呢？

不用担心，Redux 会帮你把action和reducer连接起来。

我们把 Redux实例称为 store 并用以下方式创建：

import { createStore } from "redux"

const store_0 = createStore(() => {})

注意：在createStore时，需要给它传入一个 reducer 函数。

每当一个action发生时，Redux都能调用这个函数。往 createStore 传 Reducer 的过程就是给 Redux绑定 action处理函数（也就是Reducer）的过程。

接下来，试着在 Reducer 中打印一些 log

const reducer = function (...args) {
  console.log("Reducer was called with args", args)
}

const store_1 = createStore(reducer)
// 输出：Reducer was called with args [ undefined, { type: "@@redux/INIT" } ]

我们没有dispatch(分发)任何action，但是reducer被调用了！这是由于初始化应用state的时候，Redux dispatch 了一个初始化的 action ({ type: "@@redux/INIT" })。reducer的入参为(state, action)。state还没有被初始化，自然为undefined。

如何读取store中的state?

Redux为我们提供了store.getState()方法。

import { createStore } from "redux"

const reducer_2 = function (state = {}, action) {
  console.log("reducer_2 was called with state", state, "and action", action)

  return state;
}

const store_2 = createStore(reducer_2)
// 输出: reducer_2 was called with state {} and action { type: "@@redux/INIT" }

console.log("store_2 state after initialization:", store_2.getState())
// 输出: store_2 state after initialization: {}

如何dispatch action?

我们需要使用store.dispatch(action)方法。

// 接以上代码
const anAction = {
  type : "AN_ACTION"
}
store_2.dispatch(anAction);
// 输出：reducer_2 was called with state {} and action { type: "AN_ACTION" }

combineReducers

combineReducer用于合并Reducers，并且合并对应的State。

const userReducer  = function (state = {}, action) {
  console.log("userReducer was called with state", state, "and action", action)

  switch (action.type) {
    // etc.
    default:
      return state;
  }
}
const itemsReducer = function (state = [], action) {
  console.log("itemsReducer was called with state", state, "and action", action)

  switch (action.type) {
    // etc.
    default:
      return state;
  }
}
import { createStore, combineReducers } from "redux"

const reducer = combineReducers({
  user  : userReducer,
  items : itemsReducer
})

// 输出：
// userReducer was called with state {} and action { type: "@@redux/INIT" }
// userReducer was called with state {} and action { type: "@@redux/PROBE_UNKNOWN_ACTION_9.r.k.r.i.c.n.m.i" }
// itemsReducer was called with state [] and action { type: "@@redux/INIT" }
// itemsReducer was called with state [] and action { type: "@@redux/PROBE_UNKNOWN_ACTION_4.f.i.z.l.3.7.s.y.v.i" }

var store_0 = createStore(reducer)

// 输出：
// userReducer was called with state {} and action { type: "@@redux/INIT" }
// itemsReducer was called with state [] and action { type: "@@redux/INIT" }

console.log("store_0 state after initialization:", store_0.getState())
// 输出：
// store_0 state after initialization: { user: {}, items: [] }

回过头来看看文章开头的数据流向图

View组件通过click等事件，dispatch一个(actionCreator返回的)action，通过Store把当前状态state和action传递给订阅者reducer函数,reducer返回一个新的状态存储在Store中，Store又把新的State传递给View组件触发组件更新。

为了将Redux和React联系到一起。就需要用到React-Redux这个库。

import { connect } from "react-redux"
const containerComponent = connect(mapStateToProps, mapDispatchToProps)(presentationalComponent)

简单来说，mapStateToProps和mapDispatchToProps就是分别把Redux的state,和dispatch(action)映射到React组件中作为props。connect将展示组件(presentationalComponent)封装成高阶的容器组件(containerComponent)。state的更新意味着props更新。

云服务器服务器托管 jdbc连接mysql数据库的方法浅析源码浅析 cdn浅析 Redux

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

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

redux浅析

摘要：概念是一个状态管理容器使用可以更好的管理和监测组件之间需要通信的数据。参考源码参考链接 redux概念 redux是一个状态管理容器,使用redux可以更好的管理和监测组件之间需要通信的数据。 redux基本原则单一数据源在redux中,整个应用保持一个数据源,数据源是一个树形的结构状态只读状态只读意思是不能直接修改,需要通过dispatch action方式才可以,返回的是一...

galois 2019-08-22 16:40 评论0 收藏0
浅析`redux-thunk`中间件源码

摘要：大多的初学者都会使用中间件来处理异步请求，其理解简单使用方便具体使用可参考官方文档。源码的源码非常简洁，出去空格一共只有行，这行中如果不算上则只有行。官方文档中的一节讲解的非常好，也确实帮我理解了中间件的工作原理，非常推荐阅读。总觉得文章也应该是有生命力的，欢迎关注我的Github上的博客，这里的文章会依据我本人的见识，逐步更新。大多redux的初学者都会使用redux-thunk...

wing324 2019-08-21 17:17 评论0 收藏0
浅析Redux源码

摘要：用法源码由在年创建的科技术语。我们除去源码校验函数部分，从最终返回的大的来看。这个返回值无法被识别。洋葱模型我们来看源码源码每个都以作为参数进行注入，返回一个新的链。改变原始组数，是一种副作用。 @(Redux)[|用法|源码] Redux 由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快，Redux因其...

lifesimple 2019-08-22 17:13 评论0 收藏0
前端进阶资源整理

摘要：前端进阶进阶构建项目一配置最佳实践状态管理之痛点分析与改良开发中所谓状态浅析从时间旅行的乌托邦，看状态管理的设计误区使用更好地处理数据爱彼迎房源详情页中的性能优化从零开始，在中构建时间旅行式调试用轻松管理复杂状态如何把业务逻辑这个故事讲好和前端进阶 webpack webpack进阶构建项目(一) Webpack 4 配置最佳实践 react Redux状态管理之痛点、分析与...

BlackMass 2019-08-23 12:36 评论0 收藏0
react路由浅析

摘要：浏览器端使用的和集成使用时会用到中路由分类基于提供的和事件来保持和的同步。路由剖析在上面的示例中是转发的枢纽在这个中转站有很多线路通过开关可以启动列车的运行乘坐列车就可以发现新大陆。引言在使用react做复杂的spa开发中,开发中必不可少的就是react-router,它使用Lerna管理多个仓库, 在browser端常使用的几个如下所示 react-router 提供了路由的...

jackzou 2019-08-22 16:12 评论0 收藏0