0
点赞
收藏
分享

微信扫一扫

action,reducer,store与React-Redux

是归人不是过客 2022-04-06 阅读 59

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 )

举报

相关推荐

0 条评论