初探Redux

最近刚刚开始入坑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]()
}

后续会对其的复杂应用和实现原理，源代码层面进行研究学习，同时分享出来我的经验。