Redux入门教程（快速上手）.docx

《Redux入门教程（快速上手）.docx》由会员分享，可在线阅读，更多相关《Redux入门教程（快速上手）.docx（21页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、满满的干货，耐心看完，你会发现redux原来这么可爱。典型的Web应用程序通常由共享数据的多个UI组件组成。通常， 多个组件的任务是负责展示同一对象的不同属性。这个对象表示可 随时更改的状态。在多个组件之间保持状态的一致性会是一场噩梦， 特别是如果有多个通道用于更新同一个对象。举个小栗子，一个带有购物车的网站。在顶部，我们用一个UI组件显示购物车中的商品数量。我们还可以用另一个UI组件，显示购物车中商品的总价。如果用户点击添加到购物车按钮，那么这两个组件应立即更新当前的数据。 如果用户从购物车中删除商品、更改数目、使用优惠券或者更改送货地点，那么相 关的UI组件都应该更新出正确的信息。可以看到

2、，随着功能范围的扩大，一个简单的购物车将会很难保持数据同步。在这篇文章中，我将介绍Redux框架，它可以帮助你以简单易用的方式构建复 杂工程并进行维护。为了使学习更容易，我们将使用一个简化的购物车工程来学习 Redux的工作原理。你需要至少熟悉React库，因为你以后需要将其与Redux 集成。学习前提在我们开始以前，确保你熟悉以下知识： 函数式 JavaScript 面向对象JavaScript JavaScript ES6 语法同时，确保你的设备已经安装： NodeJS Yarn（或者 npm）return statejcart: .state.cart, actioi,payload)d

3、efault:return state;)我们继续来分析一下代码。一个reducer需要处理不同的action类型，因此我们 需要一个sw/tch语句。当一个add_to_cart类型的action在应用程序中分发时, switch中的代码将处理它。正如你所看到的，我们将actio.payload中的数据与现有的State合并以创立一个 新的state o接下来，我们将定义一个action,作为store/i平的一个参数。action是一个Javascript对象，有一个必须的type和可选的payload0我们在cartRcdaccr函数 后定义一个：.functioA addToCart(

4、productj八力tg以八itCost) return (type: ADD_TART,payload: product, quantity, a八itCost )在这里，我们定义了一个函数，返回一个JavaScript对象。在我们分发消息之前， 我们添加一些代码，让我们能够监听store事件的更改。.let 八subscribe = storesuhscribe(C)=co 八so/eog(store.g 况State。);八subscKibeO；接下来，我们通过分发消息到#此来向购物车中添加商品。将下面的代码添加在八subscnbcO之前9 9 stoire.dispatck(addTo

5、Cairt(Coffee 5OOqw,25。)；stoire.dispatch(addToCartCFlour lkg- 2 1165);store.dispatcaddToCartCJuice 2L，1, 25。)；下面是整个index.js文件：/ s匕/Mdexjsimport createStore rcdx”;import combi八 cRcdaccrs fro ha 什co八st ?HodctsRedceK = f八ctio八(state=L actioi return state;covst initialstate = cart:product: bread 700g1,qi

6、Aantitg: 2)c(八itCost: 90)(productMilk 5OOw,quantity:LiiitCost: 47)cot ADDJCLCART = ADDUCART;co八st cartKeduceir =八cti。八(state=/认i力飞/Stateaction switch (actio八.tgpe) case ADDUCART: return statejcart: .state.cairtj actioi,payload)default:return state)fb(八cti。八 addToCart(productj quantitg,以八itCost) retu

7、rn type: ADDJTONART,payload: prodiACtjqua八titg)认八itCost)cost altRediAcers = products： piroductsReducer,shoppiigCart: cartRediAcer c。八st rootReducer = coH/xbi八eRea“ced(aRedced);let store = createStore(rootR.educer);console.log(initial state: u, store.getStateQ);let 八subscribe = storc.s“bscribc(0 =coo

8、le.log(store.getStateQ)；store.dispatcaddToCartCCoffee SOOgwngCart; cart: Array43) 0: (product: 1: product: 2: (product: length: 3bread 70g*t quantity: 2. unitCost: 90) 500vli3 quantity: l. unltCost: 47)Cotfe 5$0k. Quantity: L unitCost: 2M) proto : Array(O) protc ： Object proto : Objectv (producti： A

9、rray(6L oppingCart: f_。 products: I) sboppingCirt: cirt: Array(4) 0: (product: *bred 7S0g*, quantity: 2. unitCost:骗 1: (product: ilk 566L quantity: 1 unltCost: 47) 2: product: eCoffec owntity: L unitCost: 2$9), 3: (prodixt: Tlour lkga, quantity: 2. unltCost: 116) length： 4 proto : Array(O)-proto : O

10、bject proto : Object fprWi/cfs： A”(。). shopingCrt:, products:( shoppingCirt: cart: ArryS)1Mx, 2: 3:coole.log(tore.getStateQ)；stoircdispatch(ac以ToCart(Coffce 5003 1, 25。)；store.dispatcaddToCartCFlour 1kg，2,。)；store.dispatcaddToCairtJiAice 2L-1,25。)；tmsubscKibeO；整理完代码之后，程序依然会正常运行。现在我们来添加修改和删除购物车中商 品的逻

11、辑。修改 cart-actions和 cart-rediAcer.js 文件：/ SKc/Kcducers/c4rt-4cti。八sjs.export coiat UPPATE_6?ART = UPDATE_CART;export const DELETE_FROM_CART 二，DELETE_FROM_CAR；.export 缶八cti。八 lApdateCart(prodiACt, quantitg,b(八itCost) return type: UPDATENART)payload: 什么是ReduxRedux是一个流行的JavaScript框架，为应用程序提供一个可预测的状态容器。Re

12、dux基于简化版本的Flux框架，Flux是Facebook开发的一个框架。在标准的MVC框架中，数据可以在UI组件和存储之间双向流动，而Redux严格限制了 数据只能在一个方向上流动。见下列图：ComponenttriggerAction subscribe itei.product = actio.payload.pirodiACt ?actioiM.payload : itenA)case DELETE_FROM_CART: return (.state,cart: = itei.product /= actioin.payload.product1)default:return sta

13、te;最后，我们在Wex.js中分发这两个actio八:/ src/indexjs./ Update Cartstore.dispatcupdateCartFlour lkg15, lit?);/ Delete 伍必 CartstoY。.dispatch。加tcWoMCartCCoffcc SOOgw 保存完代码之后，可以在浏览器的控制台中检查修改和删除的结果。使用Redux工具调试如果我们的代码出错了，应该如何调试呢？Redux拥有很多第三方的调试工具，可用于分析代码和修复bug。最受欢迎的是 time-travelling tool, redux-devtools-extensiono 设

14、置它只需要三个步骤。 首先，在Chrome中安装Redux Devtools扩展。 然后，在运行Redux应用程序的终端里使用ctc停止服务器。并用npm 或 yarn 安装 r以ux-devtook-extension 包。yam add 丫cd认乂一devtools -exte八si。八 一旦安装完成，我们对贪0K&js稍作修改：/ sre/storejsimport cireateStore Fkom redax”;import cokposeWitkDcuTook j F/om1 redux -devtools -exteisioi1; i import irootReducer fr

15、o ha /reducers1;co八st store = createStoreootR.educer, coMposcWitkDc/TookO);export default store;我们还可以把c/MdexJs中日志相关的代码删除掉。返回Chrome,右键单击该工具的图标，翻开Redux DevTools面板：Michael OJ X，白与：Redux DevToolsTo leftTo rightTo bottomNOpen in a panel (enable in browser settings)Open Remote DevToolsOptionsRemove from C

16、hromium.Hide in Chromium menuManage extensionsimpeaofChadRawActionState FrlM SUter可以看到，Redux Devtools很强大。你可以在4比八,sate和山成方法差异)之间切 换。选择左侧面板上的不同。四。八，观察状态树的变化。你还可以通过进度条来 播放死抗ms序列。甚至可以通过工具直接分发操作信息。具体的请查看文档。集成React在本文开头，我提到Redux可以很方便的与React集成。只需要简单的几步。首先，停止服务器，并安装比-redux包：yari add react-redux接下来，在证&xjs中加入

17、React代码。我们还将使用Prwider类将React 应用程序包装在Redux容器中：/ sre/i八dexjsimport React From eactiiport ReactDOM Fkom 1 react-do;iiport Provider Fkom react-redux1;c。八st App = Reux Shopping CartReacts OM.reider(Provider store=storeApp ) docLaeiat.getEleieitByldCroot1)；目前，已经完成了集成的第一局部。可以启动服务器以查看效果。第二局部涉及 到使用刚刚安装的react

18、-redux包中的几个方法。通过这些方法将React组件与Redux的store和action相关联。此外，还可以使用Express和Feathers这样的 框架来设置APE API将为我们的应用程序提供对数据库服务的访问。感谢网友整理了本文的相关代码，如需要，请移步这里。在Redux中，我们还可以安装其他一些包，比方欧达等。我们React组件的state 将由Redux处理，确保所有组件与数据库API的同步。想要更进一步的学习， 请看 Build a CRUD App Using React, Redux and FeathersJSo总结我希望本文能对你有所帮助。当然，还有很多相关的内容需

19、要学习。例如，处理 异步操作、身份验证、日志记录等。如果觉得Redux适合你，可以看看以下几 篇文章： Redux State Management in Vanilla JavaScript Redux Logging in Production with Log Rocket Build a CRUD App Using React, Redux and FeathersJS Dealing with Asynchronous APIs in Server-rendered React文中提到了很多延伸文章，我还在一个个学习当中，遇到不错的会 翻译给大家的。?喜欢的话记得收藏哦! 在我们开

20、始实践之前，需要先了解JavaScript中的不变性意味着什么。在编码中， 我们编写的代码一直在改变变量的值。这是可变性。但是可变性常常会导致意外的 错误。如果代码只处理原始数据类型（numbers, strings, booleans）,那么你不用担忧。但是，如果在处理Arrays和Objects时，那么需要小心执行可变操作。 接下来演示不变性：翻开终端并启动node（输入node）o创立一个数组，并将其赋值给另一个变量。 let a = I/2,3 let b - ab1,213, 8 a出28可以看到，更新数组b也会同时改变数组a。这是因为对象和数组是引用数据类型-这意味着这样的数据类型

21、实际上并不保存值，而是存储指向存储单元的指 针。将a赋值给b,其实我们只是创立了第二个指向同一存储单元的指针。要解决这个问题，我们需要将引用的值复制到一个新的存储单元。在Javascript中，有三 种不同的实现方式：1 .使用Immutable.js创立不可变的数据结构。2 .使用JavaScript库（如Underscore和Lodash）来执行不可变的操作。3 .使用ES6方法执行不可变操作。本文将使用ES6方法，因为它已经在NodeJS环境中可用了，在终端中，执行以 下操作： a =12习工，2, 3 Jb =。旬ect.ass4MJm） 2, C b 1, 2)二 8 / b out

22、putI)2, 3 a output在上面的代码中，修改数组b将不会影响数组a。我们使用。妮比.模igM)创立了 一个新的副本，由数组b指向。我们也可以使用操作符()执行不可变操作： a =123兀2, 3 J。二幺 4)5)6j2/ 3 4)5)& 讥2, 3 我不会深入这个主题，但是这里还有一些额外的ES6功能，我们可以用它们执行 不可变操作： spread syntax -用于追加操作 map function -用于更新操作filter function -用于删除操作配置Redux配置Redux开发环境的最快方法是使用create-react-app工具。在开始之前，确保已经安装并更

23、新了 iodejs,八和gar八。我们生成一个w4ux-shopping-cart 项 目 并安装 Redux：create-react-appkedux-shoppi八g-cartcd 忆dux-shoppi八g-cartgaM add redux # 或者八install reux首先,删除C文件夹中除indcxjs以外的所有文件。翻开inaxjs,删除所有代码， 键入以下内容：import createStore fronA 匕cd“x；co八st reducer = fix八ctio八(state, 4cti。八)return state)const store = cireateSt

24、ore(rediAcer);让我解释一下上面的代码：1 .首先，我们从dX包中引入CKCAtcStOKCO方法。2. 我们创立了一个名为reducer的方法。第一个参数state是当前保存在store中的数据，第二个参数配比八是一个容器，用于：3. o tgpc - 一个简单的字符串常量，例如ADD, UPDATE, DELETE等。o payload -用于更新状态的数据。4.我们创立一个Redux存储区，它只能使用reducer作为参数来构造。存储在Redux存储区中的数据可以被直接访问，但只能通过提供的reducer 进行更新。注意到，我在第二点中所提到state。目前，s仅笈为unde

25、fined或null。要解决这个问题，需要分配一个默认的值给sate,使其成为一个空数组：co八st reducer = fu八ctio八(state二 口, action) return tate)让我们更进一步。目前我们创立的reducer是通用的。它的名字没有描述它的用途。那么我们如何使用多个reducer呢？我们将用到Redux包中提供的conAbiheReduccKS函数。修改代码如F：/ SKC/i八dexjsimport createStore fron/ reduxiiport com。，八cRedixcers Fkom 1 redux1;co八st prodactsRedce

26、r =八ctio八(state=力 actioi return s仅tc;)co八st cartReducer = fb(八ctio八(state二口, action) return state;1coircst 4Red“ccKS =products： productsRediAcer,shoppMgCart: cartReduceirconst rootReducer = co3bi八cRedccKS(“RcdccKS);let store = createStore(rootReducer);在上面的代码中，我们将通用的reducer修改为？匕%0t尺加四匕和cartRedixcero创

27、立这两个空的reducer是为了展示如何在一个store中使用。想加认妖0以七函数组合多个reducero接下来，我们将为reducer定义一些测试数据。修改代码如下：/ syc/M&xJsconst iiitialState = cart:product: bread 7OOgl,quantity: 2)uiaitCost: 90L(product: iilk SOOw,quantity:以八itCost: 47)1co八st cartKediAcer = fiActiostate-iiitialState, actiotrC) return state; let store = crc4t

28、cS0Ke(rootRedcer);console.log(niitial state： ”, store.getStateQ);我们使用store.getStatcO在控制台中打印出当前的状态。你可以在终端中执行stort或者9nmstrt来运行dev服务器。并在控制台中查看state。FilterDefault levels 1 item hidden by filters *oo # React App localhost:3000G flElements Memory Console Sources Audits Network Performance index.is:46initi

29、al state: Object Q products: shoppingCart: cart: Array(2)0: product: bread 700g, quantity: 2t unitCost: 90 1: product: ilk 500ml, quantity: 1, unitCost: 47 length: 2proto : Array(O) proto : Objectproto : Object现在，我们的MrtRed”什么也没做，但它应该在Redux的存储区中管理购物车商品的状态。我们需要定义添加、更新和删除商品的操作（。由。八）。我们首先定义ADD_TO_CART的逻辑：cot ADDhONART = ADD_TO_CAR；cohst c4rtRedacer = fix八ction(state=SitialState, action) switch (actio八.tgpe case ADD_TO_CART: