• Redux基础使用


    Redux

    核心

    Redux 介绍

    javascript 状态容器,提供可预测化的状态管理

    什么是状态

    • 分页当前页数状态

    • 弹出框隐藏或者显示状态

    什么是状态容器

    • 状态容器就是一个JavaScript对象
    • 把页面中这些状态转换成数据保存在一个JavaScript对象中,这个JavaScript对象就是状态容器

    状态容器的好处

    • 把dom和状态交由框架来处理,不需要操作dom元素,直接操作dom元素对应的状态对象就可以了

    使用redux的好处

    • 科学化的状态管理方式,使状态管理变得容易
    • 通过科学的状态管理,当这个状态发生变化的时候,状态变得可预测,状态发生问题可以很方便的定位问题出现在哪里

    Redux 核心概念及工作流程

    • Store: 存储状态的容器,JavaScript对象

    • View: 视图,html页面

    • Actions: 对象,描述对状态进行怎样的操作

      • 固定属性type 值由开发人员自定义
    • Reducers: 函数,操作状态并返回新的状态

    工作流程

    由于所有状态都存储在Store中,视图不能直接操作状态

    视图想要修改Store中的状态,必须先通过dispatch方法触发一个Actions描述当前进行什么操作,这个Actions 会被 Reducer 接收到,Reducer根据 Actions的type值的不同对状态进行不同处理,当Reducer处理完成后,通过返回值的方式返回给Store以更新更新Store中的状态,当Store中状态更新以后,通过subscribe同步视图中的状态

    通过使用计数器案例学习 Redux

    实现效果

    利用 Redux 实现上面的计数器功能,点击+按钮 数值+1 点击-按钮数值减1;

    1. 新建html 引入 redux.js
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
      	<div>
            <button id="plus">+</button>
            <span id="count">0</span>
            <button id="minus">-</button>
        </div>
      
      	<script src="https://cdn.bootcss.com/redux/4.0.0/redux.js"></script>
      	<script>
      			//代码写在这里
        </script>
    </body>
    </html>
    
    1. 创建 store 对象
    function reducer() {
      return {
        count: 0
      }
    }
    // 1. 创建 store 对象
    const store = Redux.createStore(reducer)
    
    // 打印 store 对象
    console.log(store)
    /*
    dispatch: ƒ dispatch(action)
    getState: ƒ getState()
    replaceReducer: ƒ replaceReducer(nextReducer)
    subscribe: ƒ subscribe(listener)
    Symbol(observable)ƒ: observable()
    */
    
    1. 改造reducer 方法存储默认状
    var initialState = {
      count: 0
    }
    // 2. 创建 reducer 函数
    function reducer(state = initialState) {
      return state
    }
    
    1. 定义改变数据的 actions ,并在reducer 函数中对对应的 action 做出不同操作
    var increment = {
      type: 'increment'
    }
    var decrement = {
      type: 'decrement'
    }
    // 第二个参数为操作的 actions 
    function reducer(state = initialState, action) {
      console.log(action)
      switch (action.type) {
        case 'increment':
          return {
            count: state.count + 1
          }
        case 'decrement':
          return {
            count: state.count - 1
          }
        default:
          return state
      }
    }
    
    1. 获取按钮添加点击事件,触发相应action
    document.querySelector("#plus").addEventListener('click', () => {
      store.dispatch(increment)
    })
    document.querySelector("#minus").addEventListener('click', () => {
      store.dispatch(decrement)
    })
    
    1. 订阅store, 更新状态到页面上
    store.subscribe(() => {
      // 获取 store 对象中的数据
      document.querySelector('#count').innerHTML = store.getState().count
    })
    

    Redux 核心api

    • createStore: 创建 Store 状态容器
    const store = Redux.createStore(reducer)
    
    • reducer: 创建用于处理状态的 reducer 函数
    function reducer (state = initialState, action) {}
    
    • getState: 获取状态
    store.getState()
    
    • subscribe: 订阅状态
    store.subscribe(function () {})
    
    • subscribe: 触发Action
    store.dispatch({type: 'description...'})
    

    本文由博客一文多发平台 OpenWrite 发布!

  • 相关阅读:
    C# 以管理员身份运行程序
    C# 全局热键设置 与 窗体热键设置
    C# Math类详细说明
    WIN7命令工具大全
    jQuery Validation ,调用valid方法时,不验证remote
    Nopcommerce4.2解析——安装
    MVC授权不通过之后不执行任何自定义ActionFilter
    《将博客搬至CSDN》
    Unity开发者的C#内存管理(中篇)
    Unity开发者的C#内存管理(上篇)
  • 原文地址:https://www.cnblogs.com/fengbaba/p/14832778.html
Copyright © 2020-2023  润新知