Redux-thunk的最佳使用实践——react-redux

       在前面的文章《到底什么是Redux中间件——基于Redux-thunk和Redux-saga理解分析》中，我们已经介绍过redux中间件Redux-thunk和Redux-saga的基本使用了。本篇文章，我们介绍一个基于Redux-chunk的新的中间件react-redux,这个中间件也是我在平常工作中使用最多的中间件。

一、项目源码展示

       在本篇文章中，我们会以简单的TodoList的实现来讲解react-redux的使用。下面是我们已经搭建好的初始项目目录。我们需要注意用红色框标注出来的三段块代码。为了增强文章的可读性，我也将源码一并贴出。

项目结构

       /src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'

ReactDOM.render(
  <React.StrictMode>
    <TodoList />
  </React.StrictMode>,
  document.getElementById('root')
);

       /src/TodoList.js

import React, { Component } from 'react'
import store from './store'

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state = store.getState()
    }
    render(){
        return (
            <div>
                <div>
                    <input value={this.state.inputValue}/>
                    <button>提交</button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index) => {
                        return (<li key={index}>{item}</li>)
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default TodoList

       /src/store/index.js

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

const store = createStore(reducer)

export default store

       /src/store/reducer.js

const defaultState = {
    inputValue: '',
    list: []
}

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

       上面就是项目的初始源代码，主要是Store的简单应用，下面我们就要使用react-redux优化和修改这写代码。

二、react-redux中的基本概念

       使用react-redux，我们需要掌握几个基本的概念，依次是Provider、connect、mapStateProps、mapdispatchToProps。他们的所代表的含义见下表。

方法 含义
Provider 提供器，接受store，被<Provider>组件包裹的组件都能使用store中传递过来的数据
connect 将组件（被<Provider>包裹起来的组件）和store链接起来
mapStateToProps 将store中的数据通过props映射到组件（被<Provider>包裹起来的组件）中
mapdispatchToProps 组件（被<Provider>包裹起来的组件）需要改变store中的数据时，将操作方法放在此方法中

       可能你对这几个概念还比较陌生，没关系，看完了下面的具体流程，相信你会对react-redux有一个全面的认识。

三、react-redux的使用流程

1、安装react-redux

yarn add react-redux

2、引入提供器（Provider），并绑定store数据，并划定数据相应的范围

/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList'
+import store from './store'
+import { Provider } from 'react-redux'

+const App = (
+  <Provider store={store}>
+    <TodoList />
+  </Provider>
+)
ReactDOM.render(
+  App,
  document.getElementById('root')
);

       引入Provider，绑定store。通过此处设置，<Provider>组件中的所有组件都能能拿到store中的数据。

3、将组件和Store关联起来并设置数据操作的方法

/src/TodoList.js

1、引入connect,配置相关connect
import { connect } from 'react-redux'
    ...
export default connect(mapStateToProps, mapDispatchToProps)(TodoList)
2、实现数据操作的相关逻辑
const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeInputValue(e){
            const action = {
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
        }
    }
}
3、使用数据
class TodoList extends Component{
    render(){
+        const { inputValue, list, changeInputValue } = this.props
        return (
            <div>
                <div>
+                    <input value={inputValue} onChange={changeInputValue}/>
                    <button>提交</button>
                </div>
                <ul>
                    {
+                        list.map((item,index) => {
+                            return (<li key={index}>{item}</li>)
+                       })
                    }
                </ul>
            </div>
        )
    }
}

       下面是TodoList.js完整的代码：

import React, { Component } from 'react'
import { connect } from 'react-redux'

class TodoList extends Component{
    render(){
        const { inputValue, list, changeInputValue, handleAddItem, handleDeleteItem } = this.props
        return (
            <div>
                <div>
                    <input value={inputValue} onChange={changeInputValue}/>
                    <button onClick={handleAddItem}>提交</button>
                </div>
                <ul>
                    {
                        list.map((item,index) => {
                            return (<li onClick={handleDeleteItem.bind(this, index)} key={index}>{item}</li>)
                        })
                    }
                </ul>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeInputValue(e){
            const action = {
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
        },
        handleAddItem(){
            const action = {
                type: 'handle_add_item'
            }
            dispatch(action)
        },
        handleDeleteItem(index){
            const action = {
                type: 'handle_delete_item',
                
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

       当然，这个组件是只有一个render钩子函数，也就是我们所说的``无状态组件```，无状态组件可以很好提升性能，主要原因有两点

1、没有任何生命周期函数，代码执行流畅度高
2、不会生成真正的组件实例，提升了性能

       修改为无状态组件的代码如下：

import React from 'react'
import { connect } from 'react-redux'

const TodoList = (props) => {
    const { inputValue, list, changeInputValue, handleAddItem, handleDeleteItem } = props
    return (
        <div>
            <div>
                <input value={inputValue} onChange={changeInputValue}/>
                <button onClick={handleAddItem}>提交</button>
            </div>
            <ul>
                {
                    list.map((item,index) => {
                        return (<li onClick={handleDeleteItem.bind(this, index)} key={index}>{item}</li>)
                    })
                }
            </ul>
        </div>
    )
}

const mapStateToProps = (state) => {
    return {
        inputValue: state.inputValue,
        list: state.list
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        changeInputValue(e){
            const action = {
                type: 'change_input_value',
                value: e.target.value
            }
            dispatch(action)
        },
        handleAddItem(){
            const action = {
                type: 'handle_add_item'
            }
            dispatch(action)
        },
        handleDeleteItem(index){
            const action = {
                type: 'handle_delete_item',
                
            }
            dispatch(action)
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(TodoList)

       至此，react-redux的基本使用已经介绍完了。感谢你的阅读。

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