一乾忱、什么是react-redux
React-Redux是Redux的官方React綁定消玄。 它允許您的React組件從Redux存儲中讀取數(shù)據(jù)脚翘,并將操作分派給存儲以更新數(shù)據(jù)贪绘。
它由二個重要的部分組成徘键,一個是<Provider />組件芳誓,另一個是connect()是react-redux提供的一個柯里化的函數(shù), 用于連接redux
二、學習網(wǎng)址
https://react-redux.js.org/docs/getting-started react-redux官網(wǎng)
三啊鸭、如何使用
npm install --save react-redux
安裝
import { Provider } from 'react-redux'
Provider 的引入
import { connect } from 'react-redux'
connect的引入
四锹淌、關(guān)于Provider
Provider是react-redux提供的一個組件,把這個組件包在最外層赠制,這個組件接收一個參數(shù)赂摆,就是store, store是通過redux提供的createStore方法創(chuàng)建的钟些。任何一個內(nèi)部組件烟号,需要用到store里的state或者其它就直接通過connect
一下即可。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './App';
import store from './store';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
五政恍、關(guān)于connect
connect有兩個括號汪拥, connect有兩個括號,第一個括號傳mapStateToProps和mapDispatchToProps篙耗,用于把這兩個方法的返回值注入到當前組件的props, 第二個括號為當前組件迫筑。
export default connect(mapStateToProps, mapDispatchToProps)(Counter);
connect的第一個括號也可以直接傳(mapStateToProps, actionCreators), actionsCreators里的每個creator就會被映射到組件的props上宪赶,并且,這些creators就自動具備了dispatch的功能
export default connect(mapStateToProps, { add, reduce, addAsync })(Counter);
mapStateToProps:
意思是把store里的state遷移到當前組件的props上脯燃,返回一個對象
// mapStateToProps搂妻,意思是把store里的state遷移到當前組件的props上,返回一個對象
const mapStateToProps = (state) => {
const {
count,
isLoading
} = state.cart;
return {
count,
isLoading
}
}
mapStateToProps:
意思是把actionCreator里創(chuàng)建的action dispatch辕棚,并且做為一個方法映射到當前組件的props上欲主,返回一個對象. 可以不這樣用
const mapDispatchToProps = (dispatch) => {
return {
reduceCount: () => {
dispatch(reduce())
},
addCount: () => {
dispatch(add())
}
}
}