zoukankan      html  css  js  c++  java
  • 【react】 redux 公共状态管理---数据的渲染,数据的修改,再把修改的数据渲染到当前组件

    核心概念
    三大原则
    1、单一数据源
       使用redux的程序,所有的state都存储在一个单一的数据源store内部,类似一个巨大的对象树。
    
       state是只读的
       state是只读的,能改变state的唯一方式是通过触发action来修改
    
    2、使用纯函数执行修改
       为了描述 action 如何改变 state tree , 你需要编写 reducers。
    
       reducers是一些纯函数,接口当前state和action。只需要根据action,返回对应的state。而且必须要有返回。
    
       一个函数的返回结果只依赖于它的参数,并且在执行过程里面没有副作用,我们就把这个函数叫做纯函数

     

    首先需要明白,redux中有方法,这些方法是封装好的

    dispatch 方法是根据动作做派发的过程
    getState 方法是返回当前store中的state的数据
    subscribe 方法是事件订阅,参是一个函数,它有一个数值专门存放函数,当执行对应的事件函数,就会遍历触发该数组中的函数

    1、store中的state数据渲染到当前组件

    2、对store中的state的数据进行修改

    在当前组件,触发,当前组件引入的store文件中的dispatch(派发器,根据传入的动作做不的行为事件),reducers.js

     

    3、把最新修改的store中的state数据更新到当前,或者说需要更新的组件中去

    总体的理解:

    目录结构

    阮一峰,对

    Redux  介绍

    http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html


    Redux的特点

    1. 统一的状态管理,一个应用中只有一个仓库(store)
    2. 仓库中管理了一个状态树(statetree)
    3. 仓库不能直接修改,修改只能通过派发器(dispatch)派发一个动作(action)
    4. 更新state的逻辑封装到reducer中

    何时使用redux?

    简单说,如果你的UI层非常简单,没有很多互动,Redux 就是不必要的,用了反而增加复杂性。

    用户的使用方式非常简单
    用户之间没有协作
    不需要与服务器大量交互,也没有使用 WebSocket
    视图层(View)只从单一来源获取数据

    Redux 的适用场景:多交互、多数据源。

    用户的使用方式复杂
    不同身份的用户有不同的使用方式(比如普通用户和管理员)
    多个用户之间可以协作
    与服务器大量交互,或者使用了WebSocket
    View要从多个来源获取数据

    从组件角度看,如果你的应用有以下场景,可以考虑使用 Redux。

    某个组件的状态,需要共享
    某个状态需要在任何地方都可以拿到
    一个组件需要改变全局状态
    一个组件需要改变另一个组件的状态

    设计思想

    Redux 的设计思想很简单,就两句话。

    (1)Web 应用是一个状态机,视图与状态是一一对应的。

    (2)所有的状态,保存在一个对象里面。

    .1State

    Store对象包含所有数据。如果想得到某个时点的数据,就要对 Store 生成快照。这种时点的数据集合,就叫做 State。

    当前时刻的 State,可以通过store.getState()拿到。

    Redux 规定, 一个 State 对应一个 View。只要 State 相同,View 就相同。你知道 State,就知道 View 是什么样,反之亦然。

    redux中各对象的说明

    store

    store是一个数据仓库,一个应用中store是唯一的,它里面封装了state状态,当用户想访问state的时候,只能通过store.getState来取得state对象,而取得的对象是一个store的快照,这样就把store对象保护起来。

    action

    action描述了一个更新state的动作,它是一个对象,其中type属性是必须有的,它指定了某动作和要修改的值:

    {type: UPDATE_TITLE_COLOR, payload: 'green'}
    

    actionCreator

    如果每次派发动作时都写上长长的action对象不是很方便,而actionCreator就是创建action对象的一个方法,调用这个方法就能返回一个action对象,用于简化代码。

    dispatch

    dispatch是一个方法,它用于派发一个动作action,这是唯一的一个能够修改state的方法,它内部会调用reducer来调用不同的逻辑基于旧的state来更新出一个新的state。

    reducer

    reducer是更新state的核心,它里面封装了更新state的逻辑,reducer由外界提供(封装业务逻辑,在createStore时传入),并传入旧state对象和action,将新值更新到旧的state对象上返回。

    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    理解C#系列 / 核心C# / 常量
    理解C#系列 / 核心C# / 变量
    理解C#系列 / C#语言的特性
    理解C#系列 / .NET体系结构
    利用DMZ对象保护全局变量
    随手翻的一道摩拜校招题
    关于为函数形参赋值和搜索变量标识符的云云
    竟然修改形参有这么可怕的后果!!
    牛得一逼的delete操作符
    屏蔽属性
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/11578519.html
Copyright © 2011-2022 走看看