Redux之旅－1

hiyang 發(fā)布于2019-08-19 18:03 / 1866人閱讀

摘要：我們約定，內(nèi)使用一個(gè)字符串類型的字段來(lái)表示將要執(zhí)行的動(dòng)作。多數(shù)情況下，會(huì)被定義成字符串常量。要進(jìn)去工廠加工產(chǎn)品，就得帶上相應(yīng)得鑰匙，不同的鑰匙對(duì)應(yīng)工廠中上不同的生產(chǎn)線里面的函數(shù)，從而有不同的產(chǎn)出改變之后的

時(shí)間：2016.4.7-17:24
作者：三月懶驢
入門配置文章：鏈接

準(zhǔn)備

在你的項(xiàng)目下面加入redux / react-redux

    npm install redux --save
    npm install react-redux --save

入門小例子

網(wǎng)上有很多關(guān)于Redux的解析了，我也不從抽象化去講解整個(gè)redux的作用，而發(fā)現(xiàn)講解Redux的編程化例子其實(shí)很少，所以在這里用代碼來(lái)說(shuō)明一下。什么叫做redux，以及它的Action／reducer／store

看過我上一遍項(xiàng)目環(huán)境搭建的朋友應(yīng)該有一個(gè)基本的項(xiàng)目目錄架構(gòu)。

主要寫代碼的還是在app這個(gè)文件夾里面，里面的目錄分布

   - component -->放置組件的
   - redux     -->放置action && reducer
   - redux_lesson -->目前是放置用Provider打包出來(lái)的組件
   - main.js   -->程序入口

代碼開始前的思考

我們現(xiàn)在要做一個(gè)很簡(jiǎn)單的東西，用前端的話來(lái)說(shuō)就是一個(gè)div標(biāo)簽，里面放置一個(gè)數(shù)字0，當(dāng)我們點(diǎn)擊這個(gè)div的時(shí)候，里面的數(shù)字就遞增。這里面我們要進(jìn)行一步就是，寫代碼前的思考。
如上所說(shuō)，我們的需求就是：點(diǎn)擊，數(shù)字遞增。那么我們的一些參數(shù)應(yīng)該定義出來(lái)了。

改變View的數(shù)據(jù)—state

個(gè)人簡(jiǎn)單理解的state就是可以反映到view上的可變數(shù)據(jù)，這里我們的state定義如下

state = {count:0}

改變state的鑰匙—Action

同樣是個(gè)人理解：state是可變的，但不是隨便的可變，要改變它，就需要一把鑰匙去打開這道大門，而action就是這把鑰匙了
我們把這個(gè)action定義成如下：

increaseAction = {type:"increase"}

Action 本質(zhì)上是 JavaScript普通對(duì)象。我們約定，action內(nèi)使用一個(gè)字符串類型的 type字段來(lái)表示將要執(zhí)行的動(dòng)作。多數(shù)情況下，type 會(huì)被定義成字符串常量。

改變state的動(dòng)作—Reducer

個(gè)人的胡亂理解：有了state，有了要改變state的鑰匙Action，那么誰(shuí)來(lái)進(jìn)行改變state的操作？reducer就是這么一個(gè)加工車間，你拿著原料(state)和鑰匙(Action)進(jìn)去總車間，用鑰匙(Action)打開對(duì)應(yīng)的生產(chǎn)線，生產(chǎn)出來(lái)新的產(chǎn)品(也是state)回去

let reducer = (state={count:0},action)=>{
    //這里面?zhèn)鬟f進(jìn)來(lái)兩個(gè)參數(shù)，
    //一個(gè)是我們前面定義的state,如果木有傳入的話，就用{count:0}
    //一個(gè)是我們前面定義的action，下面就要檢查它的type來(lái)確定操作
    let count = state.count
    switch(action.type){
        //如果鑰匙插對(duì)了孔，我們就返回進(jìn)行了相應(yīng)操作后的state對(duì)象
        case "increase":
            return {count:count+1}
            break
        //如果鑰匙都不對(duì)，就返回沒操作過的state
        default:
            return state
    }
}

被我吃了的store

因?yàn)橄鄬?duì)前面三個(gè)東西來(lái)說(shuō)，store是在太容易理解了，引入官方的話：

Store 就是把它們聯(lián)系到一起的對(duì)象。Redux 應(yīng)用只有一個(gè)單一的 store。當(dāng)需要拆分處理數(shù)據(jù)的邏輯時(shí)，使用 reducer 組合 而不是創(chuàng)建多個(gè) store。

開始真正寫代碼了

其實(shí)上面的步驟我們都把一個(gè)redux處理數(shù)據(jù)的相關(guān)工作做的差不多了，那么接下來(lái)就是要真正的去寫成程序

創(chuàng)建action

文件位置: app/redux/action.js

export const increaseAction = {type:"increase"}

創(chuàng)建reducer

文件位置: app/redux/reudcer.js

let reducer = (state={count:0},action)=>{
    let count = state.count
    switch(action.type){
        case "increase":
            return {count:count+1}
            break
        default:
            return state
    }
}
export default reducer

生成store，打包出新組件

重要的事情：store只有一個(gè)！

文件位置: app/redux_lesson/lesson_0.js

"use strict"

import React from "react"
import { createStore } from "redux"
import { Provider,connect } from "react-redux"

//這個(gè)index.js文件會(huì)在在下一步創(chuàng)建
import Index from "../component/index"
import reducers from "../redux/reducer"

//創(chuàng)建store
let store = createStore(reducers)
/*
  mapStateToProps你可以理解成在下面connect的時(shí)候?yàn)榻M件提供一個(gè)props，這個(gè)props的值是redux的state
*/
let mapStateToProps = (state) =>{
    return {count:state.count}
}
//連接你的state和最外層的組件
let Content = connect(mapStateToProps)(Index)

let {Component} = React

//使用Provider來(lái)把新的App組件打包出來(lái)
class App extends Component{
    render(){
        return 
    }
}

export default App

創(chuàng)建View

在View里面我們會(huì)接受到兩個(gè)props。一個(gè)是在mapStateToProps生成的state，一個(gè)是store給我們的dispatch，這是是一個(gè)函數(shù)，我們用它的方法很簡(jiǎn)單粗暴，往里面?zhèn)魅胍粋€(gè)Action就行了，它接受了這個(gè)Action就會(huì)告訴reducer去執(zhí)行。

文件位置: app/compoment/index.js

"use strict"

import React from "react"
import { connect } from "react-redux"
//請(qǐng)注意這里面引入了action
import {increaseAction} from "../redux/action"
let {Component,PropTypes}  = React
class Index extends Component{
    //這一步是檢查傳入的各個(gè)prop類型是否正確
    ProTypes = {
        count:PropTypes.number.isRequired,
    }
    constructor(props){
        super(props)
    }
    handleClick(){
        /*
            這一步輸入this.props可以看到，其實(shí)里面有兩個(gè)東西
            在下面的render里面我們用到了this.props.count這個(gè)
            那么這里我們要用到dispatch
        */
        console.log(this.props)
        let {dispatch} = this.props
        //粗暴簡(jiǎn)單的使用
        dispatch(increaseAction)
    }
    render(){
        let {count} = this.props
        return {count}
    }
}
//樣式文件，不用細(xì)看
let styles = {
    circle:{
        width:"100px",
        height:"100px",
        position:"absolute",
        left:"50%",
        top:"50%",
        margin:"-50px 0 0 -5px",
        borderRadius:"50px",
        fontSize:"60px",
        color:"#545454",
        backgroundColor:"#fcfcfc",
        lineHeight:"100px",
        textAlign:"center",
    }
}
export default Index

進(jìn)一步優(yōu)化代碼

要做一個(gè)點(diǎn)擊遞增就需要那么多步驟是不是很煩惱？但是如果項(xiàng)目大起來(lái)之后，你想像這樣，你就可以創(chuàng)建不同的鑰匙Action，再編寫不同的生產(chǎn)線reducer來(lái)修改各自的state，但是如上所做，我們的邏輯代碼(點(diǎn)擊遞增)和View還是捆綁在一起（就是在組件里面使用dispatch）這個(gè)方法是不可取的。所以下一步我們就要進(jìn)一步優(yōu)化我們的代碼

文件位置: app/redux_lesson/lesson_0.js

"use strict"

import React from "react"
import { createStore } from "redux"
import { Provider,connect } from "react-redux"

import Index from "../component/index"
import reducers from "../redux/reducer"
/*
    注意：這里是新增的
    相對(duì)原來(lái)，我們?cè)谧钔鈱哟虬@里引入Action
*/
import {increaseAction} from "../redux/action"

//創(chuàng)建store
let store = createStore(reducers)
/*
  mapStateToProps你可以理解成在下面connect的時(shí)候提供一個(gè)state
*/
let mapStateToProps = (state) =>{
    return {count:state.count}
}
/*
    注意：這里是新增的
    mapDispatchToProps你可以理解成在下面connect的時(shí)候提供一個(gè)放置好鑰匙的函數(shù)onIncreaseClick,直接調(diào)用就可以去reducer修改state了
*/
let mapDispatchToProps = (dispatch) =>{
    return{onIncreaseClick:()=>dispatch(increaseAction)}
}
/*
    注意：這里是修改了的
    連接你的state和最外層的組件
*/
let Content = connect(mapStateToProps,mapDispatchToProps)(Index)

let {Component} = React

//使用Provider來(lái)把新的App組件打包出來(lái)
class App extends Component{
    render(){
        return 
    }
}

export default App

文件位置: app/compoment/index.js

"use strict"

import React from "react"
import { connect } from "react-redux"
/*
    注意：這里是修改樂的
    現(xiàn)在不用引入action了，因?yàn)榍耙徊揭呀?jīng)把鑰匙Action放到相應(yīng)的函數(shù)中去，作為props傳入組件里面
*/
//import {increaseAction} from "../redux/action"
let {Component,PropTypes}  = React
class Index extends Component{
    //這一步是檢查傳入的各個(gè)prop類型是否正確
    ProTypes = {
        count:PropTypes.number.isRequired,
        onIncreaseClick:PropTypes.func.isRequired,
    }
    constructor(props){
        super(props)
    }
    handleClick(){
        /*
            注意：這里是修改過的
            現(xiàn)在，我們把打包好的，帶著鑰匙的函數(shù)進(jìn)行調(diào)用
        */
        console.log(this.props)
        let {onIncreaseClick} = this.props
        onIncreaseClick()
    }
    render(){
        let {count} = this.props
        return {count}
    }
}
//樣式文件，不用細(xì)看
...(以下相同就略去)

結(jié)語(yǔ)

redux其實(shí)不難理解，按照我個(gè)人理解的加工工廠模式：有一家大公司叫做store,里面有工廠(reducer)，公司(store)只有一家，但這家公司(store)可以有很多工廠(reducer)。要進(jìn)去工廠加工產(chǎn)品(state)，就得帶上相應(yīng)得鑰匙(Action)，不同的鑰匙(Action)對(duì)應(yīng)工廠中上不同的生產(chǎn)線(redecer里面的switch函數(shù))，從而有不同的產(chǎn)出(改變之后的state)