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；

新建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>

创建 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()
*/

改造reducer 方法存储默认状

var initialState = {
  count: 0
}
// 2. 创建 reducer 函数
function reducer(state = initialState) {
  return state
}

定义改变数据的 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
  }
}

获取按钮添加点击事件，触发相应action

document.querySelector("#plus").addEventListener('click', () => {
  store.dispatch(increment)
})
document.querySelector("#minus").addEventListener('click', () => {
  store.dispatch(decrement)
})

订阅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 发布！