Redux学习及应用

Redux学习及应用

一:Redux的来源?

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。Redux是由 Flux 演变而来,但受 Elm 的启发,避开了 Flux 的复杂性。redux设计的目标是创建一个状态管理库,来提供最简化 API,但同时做到行为的完全可预测,因此才得以实现日志打印,热加载,时间旅行,同构应用,录制和重放,而不需要任何开发参与。

二:为什么要使用Redux?

  1. 单向数据流中,同级组件无法进行数据通信
  2. 数据被合并到一个集中的位置:store,而且组件不能直接修改store中的数据,所以你总是知道状态来自哪里(store),以及允许哪一个唯一实体触发更新(action)到该状态。 可预测性

三:Redux的核心概念

  1. Store:保存数据的地方,你可以把它看成一个容器,整个应用只能有一个Store。
  2. State:Store对象包含所有数据,如果想得到某个时点的数据,就要对Store生成快照,这种时点的数据集合,就叫做State。
  3. Action:State的变化,会导致View的变化。但是,用户接触不到State,只能接触到View。所以,State的变化必须是View导致的。Action就是View发出的通知,表示State应该要发生变化了。
  4. Action Creator:View要发送多少种消息,就会有多少种Action。如果都手写,会很麻烦,所以我们定义一个函数来生成Action,这个函数就叫Action Creator。
  5. Reducer:Store收到Action以后,必须给出一个新的State,这样View才会发生变化。这种State的计算过程就叫做Reducer。Reducer是一个函数,它接受Action和当前State作为参数,返回一个新的State。
  6. dispatch:是View发出Action的唯一方法。

四:Redux的三大原则

  1. 单一数据源:整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中。

这让同构应用开发变得非常容易。来自服务端的 state 可以在无需编写更多代码的情况下被序列化并注入到客户端中。由于是单一的 state tree ,调试也变得非常容易。在开发中,你可以把应用的 state 保存在本地,从而加快开发速度。此外,受益于单一的 state tree ,以前难以实现的如“撤销/重做”这类功能也变得轻而易举。

  2.State 是只读的:唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象。

这样确保了视图和网络请求都不能直接修改 state,相反它们只能表达想要修改的意图。因为所有的修改都被集中化处理,且严格按照一个接一个的顺序执行,因此不用担心 race condition 的出现。 Action 就是普通对象而已,因此它们可以被日志打印、序列化、储存、后期调试或测试时回放出来。

  3.使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers

Reducer 只是一些纯函数,它接收先前的 state 和 action,并返回新的 state。刚开始你可以只有一个 reducer,随着应用变大,你可以把它拆成多个小的 reducers,分别独立地操作 state tree 的不同部分,因为 reducer 只是函数,你可以控制它们被调用的顺序,传入附加数据,甚至编写可复用的 reducer 来处理一些通用任务,如分页器。

原文地址:https://www.cnblogs.com/momozjm/p/11580944.html

时间: 2024-10-12 15:11:15

Redux学习及应用的相关文章

React Redux学习笔记

React Router React Router 使用教程 Redux中间件middleware [译]深入浅出Redux中间件 Redux学习之一:何为middleware? ES6 ES6新特性概览 ant ant.design rekit 先记录两篇博文,等有时间,整理一篇

redux学习

redux学习: 1.应用只有一个store,用于保存整个应用的所有的状态数据信息,即state,一个state对应一个页面的所需信息 注意:他只负责保存state,接收action, 从store.dispatch(aciton)获得一个action, 然后要通过reducer整理,旧state和新action,计算出新的state 1.1 创建: store = Redux.createStore( reducer, initState) 1.2 方法: store.getState() /

React+Redux学习笔记:React+Redux简易开发步骤

前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文章:Redux学习笔记:Redux简易开发步骤 而React+Redux是以上两部分结合起来,方便在React中使用Redux,专用库为React-Redux.js.React-Redux.js新增了一些新方法: Provider:容器跟组件,可直接把外部的state传递给所有子组件和UI组件: m

Redux学习笔记(一)

Redux 是 JavaScript 状态容器,提供可预测化的状态管理. 使用Redux应该遵循一下原则: 整个应用共享的state应该存储在store的状态树中,store是唯一的: state不能直接修改,只能通过action表达修改的意图,调用dispatch()修改state: state的修改规则reducers必须是一个纯函数,不能有副作用. Redux提供的API createStore createStore方法的作用就是创建一个 Redux store 来以存放应用中所有的 s

Redux学习笔记(二) Reducer

Action只是描述了有事情发生了这一事实,并没有指明应用如何更新 state.这是 reducer 要做的事情. reducer 就是一个函数,接收旧的 state 和 action,返回新的 state. function todos(state = [], action) { switch (action.type) { case ADD_TODO: return [...state, { text: action.text, completed: false }];default: re

Redux学习笔记------数据流

严格的单向数据流-----核心 单向的数据流使得应用中的数据遵循相同的生命周期 redux的生命周期 1.调用 store.dispatch(action). 2.Redux store 调用传入的 reducer 函数. Store 会把两个参数传入 reducer: 当前的 state 树和 action. 3.根 reducer 应该把多个子 reducer 输出合并成一个单一的 state 树. combinReducer() let todoApp = combineReducers(

redux学习笔记

3.6 Reducer Store 收到 Action 以后,必须给出一个新的 State,这样 View 才会发生变化.这种 State 的计算过程就叫做 Reducer. Reducer 是一个函数,它接受 Action 和当前 State 作为参数,返回一个新的 State. 3.3 Action State 的变化,会导致 View 的变化.但是,用户接触不到 State,只能接触到 View.所以,State 的变化必须是 View 导致的.Action 就是 View 发出的通知,表

Redux学习笔记-基础知识

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px "Helvetica Neue"; color: #404040 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 13.0px "Helvetica Neue"; color: #737373 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 16.0px "

redux学习日志:关于异步action

当我们在执行某个动作的时候,会直接dispatch(action),此时state会立即更新,但是如果这个动作是个异步的呢,我们要等结果出来了才能知道要更新什么样的state(比如ajax请求),那就没办法了,所以此时要用异步action. 这里一定要引入redux-thunk这个库,通过使用中间件Middleware来把从action到reducer这个过程给拆分成很多个小过程,这样我们就能在中间随时查找此刻的状态以及执行一些其他动作了.具体的Middleware和redux-thunk以后再