最近剛剛開(kāi)始入坑React陡鹃，妙不可言算撮。其中比較復(fù)雜繁瑣的就是這個(gè)Redux，之前Vuex用起來(lái)非常的簡(jiǎn)單亿柑。
說(shuō)下核心的一個(gè)流程邢疙，Redux做的主要是一個(gè)狀態(tài)的集中管理，React能控制的狀態(tài)其實(shí)就state和prop，redux就屬于后者秘症。view層做一個(gè)操作，就會(huì)去觸發(fā)一個(gè)Action式矫。Action會(huì)給一個(gè)reducer傳入一個(gè)新的對(duì)象乡摹，然后我們的核心其實(shí)就是reducer去改變我們的store。比較坑的就是這個(gè)action默認(rèn)只能搞同步事件采转，異步的話聪廉，就要用到中間件，這個(gè)后序會(huì)來(lái)填坑的故慈。
state -》action -》dispatch -》middleware -》reducer -》 store change -》 prop change -》refresh
基本流程用起來(lái)沒(méi)有Vuex那樣簡(jiǎn)單粗暴板熊，但就我現(xiàn)在的理解來(lái)說(shuō)，做的一個(gè)差不多的事情察绷。
從源頭store說(shuō)起
redux的store其實(shí)就是個(gè)reducer干签，每次返回的都是新對(duì)象（這個(gè)問(wèn)題后序填坑）
import * as Redux from 'redux'
import LIGHT from '../constants/key-mirror'
const initState = {
color: 'red',
isLoading: false
}
function light(state=initState, action) {
switch(action.type) {
case LIGHT.CHANGE_GREEN:
return {
color: 'green',
isLoading: false
}
case LIGHT.CHANGE_YELLOW:
return {
color: 'yellow',
isLoading: action.isLoading,
text: action.text
}
case LIGHT.CHANGE_RED:
return Object.assign({}, initState)
default:
return state
}
}
const rootReducer = Redux.combineReducers({
light
})
export default rootReducer
這邊一個(gè)重點(diǎn)的函數(shù)Redux.combineReducers，后序填坑拆撼，第一次初探容劳，主要以使用為主
有了Reducer了就該創(chuàng)建Store了
import rootReducer from '../reducers/index'
import * as Redux from 'redux'
import thunkMiddleware from 'redux-thunk'
export default function (initState) {
return Redux.createStore(rootReducer, initState, Redux.applyMiddleware(thunkMiddleware))
}
這個(gè)thunkMiddleware中間件就是用來(lái)解決異步問(wèn)題的，后序會(huì)對(duì)齊源碼進(jìn)行剖析闸度。
有了store了竭贩，就可以使用了
import App from './container/index.js'
import ReactDOM from 'react-dom'
import React from 'react'
import {Provider} from 'react-redux'
import configureStore from './store/configure-store'
import './assets/index.css'
const store = configureStore()
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>, document.getElementById('app'))
到現(xiàn)在為止，其實(shí)store中的數(shù)據(jù)其實(shí)已經(jīng)可以map到組件的props上了
使用action對(duì)我們的store進(jìn)行賦能
import lights from '../constants/key-mirror'
export function changeyellow() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch({type: lights.CHANGE_YELLOW, isloading: false})
}, 1000);
}
}
export function changegreen() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch({type: lights.CHANGE_GREEN, isloading: false})
}, 1000);
}
}
export function changered() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch({type: lights.CHANGE_RED, isloading: false})
}, 1000);
}
}
萬(wàn)事俱備莺禁，統(tǒng)統(tǒng)連起來(lái)
function mapStateToProps (state) {
return {
data: state
}
}
function mapDispatchToProps (dispatch) {
return {
actions: Redux.bindActionCreators(LightActions, dispatch)
}
}
ReactRedux.connect(mapStateToProps, mapDispatchToProps)(App)
其實(shí)就是個(gè)高階組件留量，把props傳過(guò)去了而已。當(dāng)點(diǎn)擊事件觸發(fā):
handleClick(e) {
let _cname = e.target.className
if(_cname === 'red') {
_cname = 'green'
} else {
_cname = 'yellow'
}
const {actions} = this.props
actions['change' + _cname]()
}
后續(xù)會(huì)對(duì)其的復(fù)雜應(yīng)用和實(shí)現(xiàn)原理哟冬，源代碼層面進(jìn)行研究學(xué)習(xí)楼熄，同時(shí)分享出來(lái)我的經(jīng)驗(yàn)。
