react系列(四)Redux基本概念和使用

发布日期:2019-05-06

Redux基本概念和使用

先从Flux开始

先放一个Flux官网的链接。需要fq。Flux是Facebook提出的一种构建客户端网页应用的应用架构,它是一种抽象程度很高的设计模式,鼓励单向数据流。在之前的MVC架构中,在小型应用中,Model和View较少时,关系不复杂,维护轻松。但是一旦功能越来越复杂,将难以维护,多个Model和多个View之间存在着多对多的关系,在开发时,需要花费很多时间去处理Modal间的关系。Flux架构的关键在于单向数据流,他由三部分构成——

    dispatcherstoresviews(React components)

从一次Action触发,Dispatcher将它dispatch到store,更新store,store的变化同步更新到对应的view层。等待下一次的Action触发。这个过程中,数据始终是单向流动的。

社区基于Flux有多种实现,其中Dan大神的Redux最受推崇,已经成为事实标准。

Redux

前面的文章提到了组件间通信的几种方式,context API在小规模共享应用时值得一试。今天主要讲解react全家桶中的Redux。

概念

在说概念之前,先看一张图:| 图片来源 https://css-tricks.com/learning-react-redux/根据上面的图片,可以发现Redux相当于一个全局的Provider。各个子组件是Consumer。当然,Redux不只是简单的提供一个全局Provider。它有以下几个特点:

1.唯一数据源不同于Flux的实现,Redux只有一个唯一的数据源,它提供一个深层嵌套的对象来存放所有数据。2.状态只读在Redux中,所有的状态都是只读的,如果要修改state,则需要dispatch一个action,reducer通过action的type,选择执行不同的操作,返回新的状态。3.通过纯函数改变状态纯函数的概念很简单,一个函数,给定输入,则确定输出,不受其他因素影响,也不会影响原来的引用。由于Redux提倡纯函数对状态进行处理,不会更改之前的对象,对于操作

fn(x) = y

只要x给定,则y一定是确认值。这样不论是之后进行很方便来追踪数据的更改,debug,时间回溯,都非常方便。

使用

Redux的API非常简单,这里是Redux API文档。我们只需要使用两个API就能使用到Redux。

// 创建一个Reducerlet countReducer = (state = 0 action) => { if (action.type === "ADD") { state++ } return state}// 创建一个Storevar store = Redux.createStore(countReducer)// dispatch一个actionstore.dispatch({ type: "ADD"})

如果有多个State,比如,count和user,则需要使用combineReducers方法。

import { createStore combineReducers } from "redux"// The User Reducerconst userReducer = (state = {} action) => { return state}// The Widget Reducerconst countReducer = (state = {} action) => { return state}// Combine Reducersconst reducers = combineReducers({ userState: userReducer countState: countState})const store = createStore(reducers)

在实际使用时,有ActionCreateor的概念,其实并不复杂,就是一个函数,返回响应的Action。可以在这个函数中对Action做一些逻辑的判断处理。

CountActionCreators.js

export function plus() { return { type: "PLUS" }}export function minus() { return { type: "MINUS" }}

接下来需要调用bindActionCreators。

let one = bindActionCreators({ plusOne minusOne } store.dispatch)store.subscribe(() => console.log(store.getState()))one.plusOne()one.minusOne()

这里是一个完整的例子-codesandbox。

下一篇讲解在React中使用Redux。感谢阅读。