欢迎光临
我的个人博客网站

Redux基础使用


Redux

核心

Redux 介绍

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

Redux基础使用

什么是状态

  • 分页当前页数状态

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

什么是状态容器

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

状态容器的好处

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

使用redux的好处

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

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 发布!

赞(0) 打赏
未经允许不得转载:张拓的天空 » Redux基础使用
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏