React数据管理工具Redux流程分析及基础使用实践

       在vue中，我们使用Vuex来管里我们项目中的数据，而在React中，我们同样有相应地数据管理工具Redux。Vuex和Redux要解决的问题是，在全局状态下，对某一数据进行管理，保证在各个组件中都能操作和使用同一数据。单从解释来，很像我们在全局设置的变量。在不使用这类型的工具，组件和组件之间的传递单单依靠父子组件的方式，那么对性能将是一种非常大的损害。下图是是使用Redux和不使用Redux进行组件间数据管理的概念图，从图中，可以很直观地感受到我们上面所说的结论。

使用Redux和不使用Redux进行组件间数据管理的概念图

一、Redux的工作流程

Redux的工作流程

       上图是Redux的工作流程图。对于初学者来说，要理解这个图还是需要花一点心思的，即便之前已经掌握的，后面也会遗忘掉。这里我借助慕课网金牌讲师Dell lee就这个模型举的例子来描述一下这张图。

       首先，我们将整个过程想象成图书馆书籍管理系统。React Components是一个要借书的同学，Action Creators是借书同学说的一句话，比如（我要借一本《JavaScript高级编程》），Store是图书馆管理员,Reducers是管理员手里的用于记录书籍信息的笔记本。按照这样解释后，上面的图我们可以做一些修改。如下图所示：

书籍管理系统

       那么，我们来看一下整个流程吧。
       1、借书的同学React Components说一句话Action Creators，我要借一本《JavaScript高级编程》。
       2、图书馆管理员Store听到这句话，但是她也不知道《JavaScript高级编程》这本书放在什么地方，需要查找记录书籍信息的笔记本Reducers。
       3、等查到之后，图书馆管理员Store把查到的信息提供给借书的同学React Components。

       将上面的例子转化为我们的代码逻辑如下：
       1、React Components通过dispatch(action)将操作数据的请求发送给Store。
       2、Store直接将action提交给Reducers,Reducer在处理完数据action之后，将处理结果返回给Store。
       3、Store再将结果返回给React Components。

二、Redux具体的实现

       下面的所有实例我们将通过实现TodoList这个功能来演示,同时也使用可antD。跟Store相关的内容，我们都会放在同一个文件夹中，文章末尾，我会将目录结构图给出。

       1、安装redux。

yarn add redux

       2、创建```store``。

       创建的时候时候一定要把我们的记录本带上。
/src/store/inex.js

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(
    reducer,
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
    )

export default store

       3、创建```Reducers``。

       在创建记录本的时候，我们可以为其设置一些默认的属性值。
/src/store/reducer.js

const defaultState = {
    inputValue: 'dddd',
    list: [111,222,333]
}

export default (state = defaultState, action) => {
    return state
}

       4、使用Store。

       在组件中，我们通过store.getState()方法获得Store中的数据。通过下面的方式进行访问this.state.list和this.state.inputValue进行访问。
/src/TodoList.js

import React, { Component } from 'react'
import { Input, Button, List } from 'antd';
import store from './store'
import 'antd/dist/antd.css'

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state = store.getState()
        this.handleStoreChange = this.handleStoreChange.bind(this)
        store.subscribe(this.handleStoreChange)
    }
    render(){
        return (
            <div style={{marginTop:'10px',marginLeft:'10px'}}>
                <div>
                    <Input value={this.state.inputValue} placeholder="TodoList" style={{width:'300px'}}/>
                    <Button type="primary">提交</Button>
                </div>
                <div>
                <List
                    style={{marginTop:'10px',width:'300px'}}
                    size="small"
                    bordered
                    dataSource={this.state.list}
                    renderItem={item => <List.Item>{item}</List.Item>}
                    />
                </div>
            </div>
        )
    }
    /*同步数据*/
    handleStoreChange(){
        this.setState(store.getState())
    }
}
export default TodoList

       5、组件提交action，修改Store中的数据。

       1、input数据双向绑定

render(){
        return (
            <div style={{marginTop:'10px',marginLeft:'10px'}}>
                <div>
                    <Input 
                    value={this.state.inputValue} 
                    placeholder="TodoList" 
++                    onChange={this.handleInputChange}
                    style={{width:'300px'}}/>
                    <Button type="primary">提交</Button>
                </div>
                <div>
                <List
                    style={{marginTop:'10px',width:'300px'}}
                    size="small"
                    bordered
                    dataSource={this.state.list}
                    renderItem={item => <List.Item>{item}</List.Item>}
                    />
                </div>
            </div>
        )
}

handleInputChange(e){
    const action = {
       type: 'change_input_value',
       value: e.target.value
    }
    store.dispatch(action)
}

reducer.js
       reducer 可以接受 state，但是绝对不能修改state。

export default (state = defaultState, action) => {
    if(action.type === 'change_input_value'){
        const newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    return state
}

       上面的逻辑就可以流通了。下面我们依葫芦画瓢，完成TodoList功能。
       2、增加列表项功能

<Button 
      onClick={this.handleAddItem}
      type="primary">提交</Button>

handleAddItem(){
        const action = {
            type: 'add_input_value',
        }
        store.dispatch(action)
    }

reducer.js

export default (state = defaultState, action) => {
  ...
if(action.type === 'add_input_value'){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
}
  ...

       3、删除列表项功能

<List   
  ...
  renderItem={(item,index) => <List.Item onClick={this.handleItemDelete.bind(this,index)}>{item}</List.Item>}
  ...
/>

handleItemDelete(index){
     const action = {
         type: 'delete_todo_item',
         index
     }
     store.dispatch(action)
}

reducer.js

export default (state = defaultState, action) => {
  ...
  if(action.type === 'delete_todo_item'){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
  ...
}

       至此，使用了Redux之后的TodoList功能已经完成，我们掌握了Redux的用法。

三、优化Redux代码

1、ActionTypes拆分，常量化action中的type值，减少单词拼接错误

/src/actionType.js

export const CHANGE_INPUT_VALUE = 'change_input_value'
export const ADD_TODO_ITEM = 'add_input_value'
export const DELETE_TODO_ITEM = 'delete_todo_item'

TodoList.js

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './store/actionTypes'

handleInputChange(e){
    const action = {
       type: CHANGE_INPUT_VALUE,
       value: e.target.value
     }
     store.dispatch(action)
}
handleAddItem(){
    const action = {
      type: ADD_TODO_ITEM,
    }
    store.dispatch(action)
}
handleItemDelete(index){
   const action = {
      type: DELETE_TODO_ITEM,
      index
    }
    store.dispatch(action)
}

Reducer.js

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './actionTypes'
const defaultState = {
    inputValue: '',
    list: []
}

export default (state = defaultState, action) => {
    if(action.type === CHANGE_INPUT_VALUE){
        const newState = JSON.parse(JSON.stringify(state))
        newState.inputValue = action.value
        return newState
    }
    if(action.type === ADD_TODO_ITEM){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.push(newState.inputValue)
        newState.inputValue = ''
        return newState
    }
    if(action.type === DELETE_TODO_ITEM){
        const newState = JSON.parse(JSON.stringify(state))
        newState.list.splice(action.index, 1)
        return newState
    }
    return state
}

2、使用actionCreator统一创建action，方便调用，易于测试

/src/store/actionCreator.js

import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './actionTypes'

export const getInputChangeAction = (value) => ({
    type: CHANGE_INPUT_VALUE,
    value
})

export const getAddItemAction = () => ({
    type: ADD_TODO_ITEM
})

export const getDeleteItemAction = () => ({
    type: DELETE_TODO_ITEM
})

TodoList.js

-- import { CHANGE_INPUT_VALUE, ADD_TODO_ITEM, DELETE_TODO_ITEM} from './store/actionTypes'
++ import { getInputChangeAction, getAddItemAction, getDeleteItemAction } from './store/actionCreator'

handleInputChange(e){
    const action = getInputChangeAction(e.target.value)
    store.dispatch(action)
}
handleAddItem(){
    const action = getAddItemAction()
    store.dispatch(action)
}
handleItemDelete(index){
    const action = getDeleteItemAction(index)
    store.dispatch(action)
}

       至此，我们的代码优化完成。项目目录结构如下图所示：


项目目录结构

四、Redux设计和使用的三个原则

       1、store是唯一的

       2、只有store能够改变自己的内容

       3、Reducer必须是纯函数

       纯函数是指：给定固定的输入，就一定有固定的输出，且不会有任何副作用。
       当函数中存在异步的ajax请求，或者异步的setTimeout的时候，或者存在时刻改变函数返回值的方法调用的情况，这个函数就不是纯函数。如下面代码：

new Date()时刻改变，导致函数不是纯函数

五、Redux中常用的API

Redux中常用的API

createStore 创建仓库

store.dispatch 传递action

store.getState 获取store中的数据

store.subscribe 订阅store的改变

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 223,858评论 6赞 521
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 95,753评论 3赞 402
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 170,876评论 0赞 366
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 60,560评论 1赞 300
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 69,574评论 6赞 399
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 53,097评论 1赞 314
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 41,477评论 3赞 427
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 40,452评论 0赞 278
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 46,980评论 1赞 324
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 39,017评论 3赞 343
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 41,168评论 1赞 354
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 36,807评论 5赞 350
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 42,497评论 3赞 336
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,976评论 0赞 25
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 34,094评论 1赞 275
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 49,659评论 3赞 380
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 46,196评论 2赞 363