最近刚刚开始入坑React，妙不可言。其中比较复杂繁琐的就是这个Redux，之前Vuex用起来非常的简单。
说下核心的一个流程，Redux做的主要是一个状态的集中管理，React能控制的状态其实就state和prop，redux就属于后者。view层做一个操作，就会去触发一个Action。Action会给一个reducer传入一个新的对象，然后我们的核心其实就是reducer去改变我们的store。比较坑的就是这个action默认只能搞同步事件，异步的话，就要用到中间件，这个后序会来填坑的。
state -》action -》dispatch -》middleware -》reducer -》 store change -》 prop change -》refresh
基本流程用起来没有Vuex那样简单粗暴，但就我现在的理解来说，做的一个差不多的事情。
从源头store说起
redux的store其实就是个reducer，每次返回的都是新对象（这个问题后序填坑）
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
这边一个重点的函数Redux.combineReducers，后序填坑，第一次初探，主要以使用为主
有了Reducer了就该创建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))
}
这个thunkMiddleware中间件就是用来解决异步问题的，后序会对齐源码进行剖析。
有了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'))
到现在为止，其实store中的数据其实已经可以map到组件的props上了
使用action对我们的store进行赋能
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);
}
}
万事俱备，统统连起来
function mapStateToProps (state) {
return {
data: state
}
}
function mapDispatchToProps (dispatch) {
return {
actions: Redux.bindActionCreators(LightActions, dispatch)
}
}
ReactRedux.connect(mapStateToProps, mapDispatchToProps)(App)
其实就是个高阶组件，把props传过去了而已。当点击事件触发:
handleClick(e) {
let _cname = e.target.className
if(_cname === 'red') {
_cname = 'green'
} else {
_cname = 'yellow'
}
const {actions} = this.props
actions['change' + _cname]()
}
后续会对其的复杂应用和实现原理，源代码层面进行研究学习，同时分享出来我的经验。
