回顧Vuex
核心內(nèi)容
- store樹存儲所有module，state，getter，mutation，action，在index.js入口文件使用Vue.use(vuex)，向根組件注入store樹。
- mutation中可以對state進(jìn)行一些簡單的同步操作
- action中處理異步操作
- 只能通過dispatch(action)或者commit(mutation)來改變store樹狀態(tài)
- 提供mapGetters,mapMutations,mapStates,mapActions等輔助函數(shù)，方便各個組件混入狀態(tài)
- 也是單向數(shù)據(jù)流
react父子組件傳值
父組件傳遞給子組件
// 父
render(){
return <Child msg={ this.state.msg }>
}
...
// 子
render(){
//接收
return <p>{ this.props.msg }</p>
}
子組件傳給父組件
// 父
return <Child fn={ ()=>this.fn }>
// 子
componentDidMount(){
// 通過調(diào)用父組件傳遞的函數(shù)，向其中傳遞子組件需要傳遞給父組件的參數(shù)，類似于jsonp技術(shù)，父組件相當(dāng)于服務(wù)端
this.props.fn( data )
}
兄弟組件通信需要依賴于他們擁有的共同的父組件，父組件通過傳給子組件1函數(shù)的形式獲取子組件1要傳給子組件2的data再在子組件2的template上通過props傳給子組件2，達(dá)到兄弟同信的效果。
接觸Redux
在react中的父子組件通信也類似于vue，甚至可以說一樣[笑哭臉]，同樣當(dāng)數(shù)據(jù)流十分復(fù)雜時，父子組件間的通信會非常得混亂和不直觀，不宜于閱讀和編寫，所以才產(chǎn)生的redux。
- 同樣的redux也是通過向根組件注入store來管理全局狀態(tài)。
- 要使用Redux，首先在入口文件index.js引入至少兩個東西，一個是redux中的createStore模塊，還有一個自己寫的reducer模塊。通過
createStore(reducer)來創(chuàng)建Store樹。然后在根組件上注冊。 - Redux默認(rèn)只運(yùn)行同步操作，如果有異步操作還需要使用redux提供的applyMiddleware中間件，并安裝redux-thunk獲取其中唯一的thunk模塊，傳入中間件，并將其寫入createStore的第二個參數(shù)，使得此時的store樹內(nèi)的狀態(tài)可以被異步更改了。
- 介紹一下reducer，自行編寫的reducer導(dǎo)出兩個東西，一個是reducer簡歷，reducer簡歷通過接受state和action兩個參數(shù)，根據(jù)action.type來進(jìn)行對state的更改，第二個就是許許多多的actions，可以類比于vuex中的mutation和action的結(jié)合體，action是函數(shù)，返回的對象包含了action的type和用于更改state的數(shù)據(jù)。這些actions需要通過dispatch(action())來觸發(fā)。
- 然后，為了不在每個組件寫入需要的store樹，引入react-redux模塊，其中的Provider在入口文件作為template包裹根結(jié)點(diǎn)，并傳入store，從而達(dá)到注入的效果。
ReactDOM.render(
// 提供provider函數(shù)，應(yīng)用在最外層，傳入store即可，所有的action也不用一個一個傳進(jìn)來了
(<Provider store={store}>
<App/>
</Provider>),
document.getElementById('root')
)
- 再然后，根組件的生成過程中引入react-redux的connect模塊，connect模塊接收兩個函數(shù)作為參數(shù)，一個是mapStatetoProps，將store中的State屬性混入props，一個是所需的actions對象的一個集合對象actionCreators。然后connect函數(shù)返回一個函數(shù)接受根組件為參數(shù)(裝飾者模式),返回一個全新的App組件，從而在組件中只需簡單地使用this.props.action就能觸發(fā)store樹的改變，通過this.props.stateName就能獲取Store樹的內(nèi)容。
import { connect } from 'react-redux'
import { add,reduce,addSync } from './index.redux.js';
const mapStatetoProps = (state) => {
return { num:state }
}
const actionCreators = { add,reduce,addSync }
class App extends React.component{...}
// 裝飾App
App = connect(mapStatetoProps,actionCreators)(App)
// @connect(mapStatetoProps,actionCreators)和上面代碼相同，但是需要引入plugins插件
export default App
- reducer組合，為了處理頁面邏輯，一般每個頁會單獨(dú)寫一個reducer，之后把所有的reducer整合在一起，通過redux的combineReducers函數(shù)組合所有的reducer，之后在根節(jié)點(diǎn)創(chuàng)建store時，通過改reducers創(chuàng)建，則每個組件都能通過this.props訪問到所有的reducer中的state了。~~~
-
通過reducers來修改狀態(tài)，dispatch(action) [或者!!!] 觸發(fā)整合后的action函數(shù)返回了reducers對象，都會觸發(fā)reducer。
export reducer 因為要在reducer.js中整合所有的reducer
export actions 因為在組建中要使用并觸發(fā)這些action
不過還是感覺vue寫得舒服0 0
代表開發(fā)者謝謝二位??????