- 搜索
德胜云资讯,添加一些关于程序相关的内容,仅供大家学习交流（https://www.wxclwl.com）
日期：2023/03/20 18:51作者：周白芷人气：
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 }}获取按钮添加点击事件，触发相应actiondocument.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： 触发Actionstore.dispatch({type: description...})本文由博客一文多发平台 OpenWrite 发布！
