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