redux
下載redux工具
cnpm i redux -S創(chuàng)建store
const store = createStore(reducer)
創(chuàng)建reducer純函數(shù)
為store掛載默認(rèn)狀態(tài)
為reducer的state參數(shù)設(shè)置默認(rèn)值，再返回出新的state，這樣的話捡偏，store就有state了
- 組件使用store的state
組件通過調(diào)用store.getState()來獲得store中的state
- 創(chuàng)建actionCreator
actionCreator里的方法菠发，作用是執(zhí)行一些自定邏輯之后已骇，創(chuàng)建一個帶有標(biāo)識性信息的action钞它，交由reducer處理
?
let action = {
type: _TODO,//_TOOD 是一個常量
todos
}
store.dispatch(action)
- 在reducer中，根據(jù)action上的標(biāo)識信息做出判斷之后柿扣，返回一個新狀態(tài)章贞，這個時候store里的狀態(tài)已經(jīng)更改了
import _state from './state'
import {
_TODO, //定義的常量
} from './const'
const reducer = ( state = _state, action) => {
let new_state = Object.assign({}, state)//此方法為原生方法祥绞，作用看最后面注釋switch ( action.type ) { case _TODO:;break; default:break; } //reducer一定要返回狀態(tài) return new_state}
export default reducer
- 讓組件去獲取最新的狀態(tài)
在組件的初始化階段的生命周期鉤子函數(shù)componentWillMount () {}中給store.subscribe傳入回調(diào)函數(shù)，當(dāng)狀態(tài)更改的時候這個回調(diào)函數(shù)就會觸發(fā)，在這個回調(diào)里就可以讓組件獲取最新的狀態(tài)之后進(jìn)行setState蜕径，當(dāng)然两踏，如果發(fā)現(xiàn)所用的狀態(tài)沒有更改可以做出判斷來決定是否進(jìn)行setState
componentWillMount () {
//當(dāng)store里的zhuangt改變的時候，store.subscribe方法里傳入的函數(shù)就會執(zhí)行
store.subscribe(() => {
this.setState({todos: store.getState().todos})
})
}
reducer劃分
當(dāng)我們協(xié)同開發(fā)的時候兜喻，或者項目獨立功能模塊較多的時候梦染，把狀態(tài)放在一個reducer中處理的話會導(dǎo)致更新維護(hù)比較麻煩
在這里我們研究將store進(jìn)行模塊化的管理
actionCreator、state本身與store耦合度很低虹统，最主要的是把reducer拆分開
我們可以利用combindReducers函數(shù)弓坞，將分離開的renducer整合成一個，這樣的話车荔，需要注意的是在使用的時候，state也會根據(jù)劃分的reducer有一個不同的分布
react-redux
這是一個好東西戚扳！
對比redux與vue中的vuex忧便，vuex要比redux用起來簡單、方便帽借！
因為vuex是vue的一個工具珠增、插件，與vue的耦合度高砍艾，所以里面很多東西作者已經(jīng)給我們封裝好了
但是redux不只是react可以用蒂教，很多地方都能去用，所以在react中使用redux的時候脆荷，很多東西都需要我們自己寫~
麻煩的地方：
- 組件獲取狀態(tài)較為麻煩
- 狀態(tài)更新之后凝垛，組件需要手動的獲取最新狀態(tài)
- 組件使用actionCreator的方法也不是很方便
所以現(xiàn)在學(xué)習(xí)使用react-redux工具，這個工具是準(zhǔn)么將react和redux連接起來的
下載 npm i react-redux -S
在react-redux中蜓谋，有一個概念：
組件應(yīng)該劃分一下類別：容器組件（智能組件）梦皮、UI組件（木偶組件）
這樣的話，任何一個組件都可以分離成一個容器組件和一個UI組件的組合
容器組件去和store進(jìn)行交互桃焕，獲取狀態(tài)...然后再將這些東西傳遞給UI組件剑肯，UI組件從屬性里接收基于可以了
容器組件可以利用react-redux去根據(jù)現(xiàn)有的UI組件去自動生成
也就是說只是要需要和store進(jìn)行交互的組件，我們就將其處理成容器組件和UI組件的結(jié)合观堂，我們只需要寫UI組件就可以了让网，容器組件會自動生成的
使用方法：
- 在根組件外部包裹上Provider組件，并為其傳入store
<Provider store = { store }>
<App />
</Provider>
目的师痕，讓Provider里面的所有的容器組件都可以使用到store里的東西
Provider是通過context屬性將自己的東西傳遞到內(nèi)部子級組件中的
把需要使用到全局狀態(tài)的組件處理成容器組件和UI組件
-
ContainerComponnet = connect()(UIComponent)
讓容器組件將自己context里的store相關(guān)的東西傳遞給UI組件
actionCreator的方法只負(fù)責(zé)創(chuàng)建對應(yīng)的action就可以了溃睹，無需再去dispatch
-
現(xiàn)在要讓組件去調(diào)用store.dispatch，也就是說讓組件得到store.dispatch的方法七兜，這也屬性在使用store的東西丸凭，這個時候也要生成一個容器組件
傳入mapDispatchToProps方法可以將一些方法傳入到UI組件的屬性上，而這些方法都能調(diào)用到dispatch，將actionCreator創(chuàng)建好的action傳入到dispatch里就可以了
可以利用bindActionCreators將actionCreator的方法處理一下產(chǎn)生新方法惜犀，在新方法里已經(jīng)自動的將原方法里產(chǎn)生action給dispatch了
-
這個時候铛碑，actionCreator變得純粹了很多，不用去dispatch虽界，專注的返回action就可以了汽烦，但是，如果我們有異步動作的話莉御，現(xiàn)在放在action里直接不生效了
在這里撇吞，我們使用redux的中間件來處理，redux的中間件有很多：redux-thunk礁叔、redux-promise牍颈、redux-saga......
在這里我們學(xué)習(xí)使用redux-thunk
redux-thunk的使用方法
- npm i redux-thunk -S
- 將thunk中間在在創(chuàng)建store的時候加入進(jìn)去
import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import reducer from './reducer'
const store = createStore(reducer, applyMiddleware(thunk))
-
actionCreator里的方法就可以返回一個函數(shù)。這個函數(shù)會接收到dispatch
所以琅关，如果有異步的動作煮岁，就在對應(yīng)的actionCreator的方法里返回一個接收到dispatch的函數(shù)，在這個函數(shù)中創(chuàng)建action再手動的dispatch
注釋：
Object.assign()方法的用法
合并多個對象克隆對象（淺）涣易；
為對象添加多個方法
Object.assign(SomeClass.prototype, {
someMethod(arg1, arg2) {
},
anotherMethod() {
}
});?
// 原來的方法
SomeClass.prototype.someMethod = function (arg1, arg2) {
};
SomeClass.prototype.anotherMethod = function () {
};
