redux学习笔记

---

目的

理解、使用redux

开发RN的前端部分

掌握一些js

---

一、Redux和React什么关系

Redux是什么

Redux is a predictable state container for JavaScript apps.

Redux是一套管理数据流的框架，可以理解为一种设计模式的js实现。

比如iOS中的ViewController是MVC这种模式，而Redux实现的其实就是一个状态机：(准确的说是Flux架构)

(preState, action) => newState

React是什么

A JavaScript library for building user interfaces.

从官方介绍看，React实际上就是一个UI框架。可以通过这篇文章简单认识下：

（主要注意这些概念：组件，属性，虚拟DOM，props和state）

React 入门实例教程

两者一个是数据层，一个是UI层，并没有直接的关系。我们可以只使用React开发一个webapp，但如果我们的app涉及到复杂的交互和数据流转，那么最好使用一套规范的数据流架构，这方面Redux是一个不错的选择。而Redux也并不依赖于React，它支持多种框架 Ember、Angular、jQuery 甚至纯 JavaScript。

二、认识Redux

(state, action) => state

Redux的三个部分，对应其三大原则：

• store : 存储所有的state

  • 原则一：单一数据源，整个应用的state都被保存在一棵状态树中，并且只存在与唯一一个store中。

• action : 定义改变state的事件

  • 原则二：state是只读的，要想修改数据，必须触发action描述发生了什么变化

• reducer : 描述action如何改变state

  • 原则三：使用纯函数执行修改

    纯函数是这样一种函数，即相同的输入，永远会得到相同的输出，而且没有任何可观察的副作用。

https://github.com/reactjs/redux 简单使用

redux middleware

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

为什么需要

middleware好处：可以组合，自由插拔

image

image

redux-thunk redux-logger

例：异步请求

自己写一个middleware

官方文档 中文

函数式编程指南

redux middleware 详解