|
Redux
action(动作)：描述要干的事
{ type： 'increment', payload: 10 } // +10
{ type： 'decrement', payload: 10 } // -10
reducer（函数）：更新状态
reducer 它是一个纯函数。接收两个参数：action（要干啥），和一个给定的状态计算出一个新的状态。这个新的状态作为 reducer 下次处理数据（接收到action通知）的输入。
store（仓库）：配合action和reducer
// 导入redux
import { createStore } from 'redux'
// 创建 store, 参数为：reducer 函数(需要一个干活的)
const store = createStore(reducer)
// 直接分发一个action
store.dispatch( {type: 'increment', payload: 2} )
// 调用action creator 返回一个action
store.dispatch( increment(2) )
// 获取状态（干完活，取成果）
const state = store.getState()
React-Redux
将Redux中管理的数据注入到React组件中
1. 安装 react-redux：`npm i react-redux`
2. 从 react-redux 中导入 Provider 组件
3. 创建 store 实例
4. 使用 Provider 包裹整个应用
5. 通过Provider 的 store 属性，将创建好的store实例注入的组件中
获取状态-useSelector
导入 useSelector
import { useSelector } from 'react-redux'
useSelector(state => state)
const count = useSelector(state => state)
分发动作useDispatch
导入 useDispatch
import { useDispatch } from 'react-redux'
调用 useDispatch 获得 dispatch 函数
const dispatch = useDispatch()
调用 dispatch 分发 action
dispatch( action )
|