- 要將store注入到組件當(dāng)中,必須用<Provider store={store對(duì)象}></Provider>標(biāo)簽將組件包裹
??<Provider></Provider>組件引入自"react-redux"核心包
import { Provider } from 'react-redux';
import store from './store/index';
<Provider store={store}>
<App />
</Provider>
2."react-redux"核心包為我們提供的鉤子函數(shù)
- ①useSelector(state => {}) 用來(lái)抓取store中存儲(chǔ)的state數(shù)據(jù)
1.其中形參state獲取的是所有切片中的state集合
2.函數(shù)中通過(guò)返回 state.name (name為store中各切片的屬性名),來(lái)提取各切片數(shù)據(jù)
3.此時(shí),調(diào)用useSelector()函數(shù)會(huì)返回回調(diào)函數(shù)中的返回值,用一個(gè)變量接收該對(duì)象即可
const student = useSelector(state => state.student)
console.log(student.age);
- ②useDispatch()獲取派發(fā)器對(duì)象,此鉤子函數(shù)無(wú)需傳參
import { useDispatch } from "react-redux";
const dispatch = useDispatch()
引入切片頁(yè)面中暴露的action創(chuàng)建器(例如setName、setAge等),然后作為調(diào)用dispatch時(shí)的參數(shù)即可
import { setName,setAge } from "./store";
const nameHandler = () => {
dispatch(setName({name:'楊玉蟬'}))
}