什么是redux
Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理。
为什么Rect要用 Redux
React 是 DOM 的一个抽象层(UI 库),并不是 Web 应用的完整解决方案。因此react在涉及到数据的处理以及组件之间的通信时会比较复杂。 对于大型的复杂应用来说,这两方面恰恰是最关键的。因此,只用 React,写大型应用比较吃力
-
不使用 Redux :
-
只能使用父子组件通讯、状态提升等 React 自带机制
-
处理远房亲戚(非父子)关系的组件通讯时乏力
-
组件之间的数据流混乱,出现 Bug 时难定位
-
-
使用 Redux :
-
集中式存储和管理应用的状态
-
处理组件通讯问题时,无视组件之间的层级关系
-
简化大型复杂应用中组件之间的通讯问题
-
数据流清晰,易于定位 Bug
-
Redux 三个核心概念
1.action
-
一个js对象,包含两个属性:
-
type: 标识属性,值是字符串。多个type用action分开
-
payload:数据属性,可选。表示本次动作携带的数据
-
-
actions 只是描述了有事情发生了这一事实,并没有描述应用如何更新 state。
-
特点:
-
只描述做什么
-
JS 对象,必须带有
type
属性,用于区分动作的类型 -
根据功能的不同,可以携带额外的数据,配合该数据来完成相应功能
-
2.reducer
-
一个纯函数
-
作用
-
-
初始化状态
-
修改状态
-
-
-
修改状态
根据传入的旧状态和action,返回新状态
公式:
(previousState, action) => newState
3.store
-
store:仓库,Redux 的核心,整合 action 和 reducer
-
特点:
-
一个应用只有一个 store
-
维护应用的状态,获取状态:
store.getState()
-
创建 store 时接收 reducer 作为参数:
const store = createStore(reducer)
-
发起状态更新时,需要分发 action:
store.dispatch(action)
-
-
其他 API, — 订阅(监听)状态变化:
const unSubscribe = store.subscribe(() => {})
— 取消订阅状态变化:unSubscribe()
Redux功能演示核心代码
1.安装redux
npm i redux
2.定义reducer
initState = 0
export default function reducer(state = initState, action) {
return state
}
3.定义action
const action1 = { type:'addN', payload: 12 }
// store.dispatch(action1)
const action2 = { type:'add', payload: 1 }
4.定义store
import reducer from './reducers/index'
import { createStore } from 'redux'
// 创建 store
const store = createStore(reducer)
5.添加订阅者
// 导入store
store.subscribe(() => {
ReactDOM.render(<App />, document.getElementById('root'))
})
使用和修改store
1.获取状态
store.getState()
2.修改状态
store.dispatch(action)