优雅的在React项目中使用Redux的方法


Posted in Javascript onNovember 10, 2018

或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处

首先我们会用到哪些框架和工具呢?

React
UI框架
Redux
状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux
react-redux
React插件,作用:方便在React项目中使用Redux
react-thunk
中间件,作用:支持异步action

|--src
  |-- store        Redux目录
    |-- actions.js
    |-- index.js
    |-- reducers.js
    |-- state.js
  |-- components    组件目录
    |-- Test.jsx
  |-- App.js        项目入口

准备工作

第1步:提供默认值,既然用Redux来管理数据,那么数据就一定要有默认值,所以我们将state的默认值统一放置在state.js文件:

// state.js

// 声明默认值
// 这里我们列举两个示例
// 同步数据:pageTitle
// 异步数据:infoList(将来用异步接口获取)
export default {
  pageTitle: '首页',
  infoList: []
}

第2步:创建reducer,它就是将来真正要用到的数据,我们将其统一放置在reducers.js文件

// reducers.js

// 工具函数,用于组织多个reducer,并返回reducer集合
import { combineReducers } from 'redux'
// 默认值
import defaultState from './state.js'

// 一个reducer就是一个函数
function pageTitle (state = defaultState.pageTitle, action) {
 // 不同的action有不同的处理逻辑
 switch (action.type) {
  case 'SET_PAGE_TITLE':
   return action.data
  default:
   return state
 }
}

function infoList (state = defaultState.infoList, action) {
 switch (action.type) {
  case 'SET_INFO_LIST':
   return action.data
  default:
   return state
 }
}

// 导出所有reducer
export default combineReducers({
  pageTitle,
  infoList//
//

第3步:创建action,现在我们已经创建了reducer,但是还没有对应的action来操作它们,所以接下来就来编写action

// actions.js

// action也是函数
export function setPageTitle (data) {
 return (dispatch, getState) => {
  dispatch({ type: 'SET_PAGE_TITLE', data: data })
 }
}

export function setInfoList (data) {
 return (dispatch, getState) => {
  // 使用fetch实现异步请求
  window.fetch('/api/getInfoList', {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(res => {
    return res.json()
  }).then(data => {
    let { code, data } = data
    if (code === 0) {
      dispatch({ type: 'SET_INFO_LIST', data: data })
    }
  })
 }
}

最后一步:创建store实例

// index.js

// applyMiddleware: redux通过该函数来使用中间件
// createStore: 用于创建store实例
import { applyMiddleware, createStore } from 'redux'

// 中间件,作用:如果不使用该中间件,当我们dispatch一个action时,需要给dispatch函数传入action对象;但如果我们使用了这个中间件,那么就可以传入一个函数,这个函数接收两个参数:dispatch和getState。这个dispatch可以在将来的异步请求完成后使用,对于异步action很有用
import thunk from 'redux-thunk'

// 引入reducer
import reducers from './reducers.js'

// 创建store实例
let store = createStore(
 reducers,
 applyMiddleware(thunk)
)

export default store

至此,我们已经完成了所有使用Redux的准备工作,接下来就在React组件中使用Redux

开始使用

首先,我们来编写应用的入口文件APP.js

// App.js

import React from 'react'
import ReactDOM from 'react-dom'

// 引入组件
import TestComponent from './components/Test.jsx'

// Provider是react-redux两个核心工具之一,作用:将store传递到每个项目中的组件中
// 第二个工具是connect,稍后会作介绍
import { Provider } from 'react-redux'
// 引入创建好的store实例
import store from '@/store/index.js'

// 渲染DOM
ReactDOM.render (
 (
  <div>
    {/* 将store作为prop传入,即可使应用中的所有组件使用store */}
    <Provider store = {store}>
     <TestComponent />
    </Provider>
  </div>
 ),
 document.getElementById('root')
)

最后是我们的组件:Test.jsx

// Test.jsx

import React, { Component } from 'react'

// connect方法的作用:将额外的props传递给组件,并返回新的组件,组件在该过程中不会受到影响
import { connect } from 'react-redux'

// 引入action
import { setPageTitle, setInfoList } from '../store/actions.js'

class Test extends Component {
 constructor(props) {
  super(props)
 }

 componentDidMount () {
  let { setPageTitle, setInfoList } = this.props
  
  // 触发setPageTitle action
  setPageTitle('新的标题')
  
  // 触发setInfoList action
  setInfoList()
 }

 render () {
  // 从props中解构store
  let { pageTitle, infoList } = this.props
  
  // 使用store
  return (
   <div>
    <h1>{pageTitle}</h1>
    {
      infoList.length > 0 ? (
        <ul>
          {
            infoList.map((item, index) => {
              <li>{item.data}</li>
            })
          }
        </ul>
      ):null
    }
   </div>
  )
 }
}

// mapStateToProps:将state映射到组件的props中
const mapStateToProps = (state) => {
 return {
  pageTitle: state.pageTitle,
  infoList: state.infoList
 }
}

// mapDispatchToProps:将dispatch映射到组件的props中
const mapDispatchToProps = (dispatch, ownProps) => {
 return {
  setPageTitle (data) {
    // 如果不懂这里的逻辑可查看前面对redux-thunk的介绍
    dispatch(setPageTitle(data))
    // 执行setPageTitle会返回一个函数
    // 这正是redux-thunk的所用之处:异步action
    // 上行代码相当于
    /*dispatch((dispatch, getState) => {
      dispatch({ type: 'SET_PAGE_TITLE', data: data })
    )*/
  },
  setInfoList (data) {
    dispatch(setInfoList(data))
  }
 }
}

export default connect(mapStateToProps, mapDispatchToProps)(Test)

Redux三大原则

单一数据源
整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中

State 是只读的
唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象

使用纯函数来执行修改
为了描述 action 如何改变 state tree ,你需要编写 reducers

结语

感谢您的观看,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js的event详解。
Sep 06 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
Feb 18 Javascript
js添加千分位的实现代码(超简单)
Aug 01 Javascript
AngularJS中watch监听用法分析
Nov 04 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
JS伪继承prototype实现方法示例
Jun 20 Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
Vue组件之单向数据流的解决方法
Nov 10 #Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 #Javascript
如何在基于vue-cli的项目自定义打包环境
Nov 10 #Javascript
Vue项目报错:Uncaught SyntaxError: Unexpected token
Nov 10 #Javascript
node+express框架中连接使用mysql(经验总结)
Nov 10 #Javascript
vue axios请求频繁时取消上一次请求的方法
Nov 10 #Javascript
微信小程序实现跑马灯效果
Oct 21 #Javascript
You might like
JAVA/JSP学习系列之七
2006/10/09 PHP
在PHP中利用XML技术构造远程服务(下)
2006/10/09 PHP
Php部分常见问题总结
2006/10/09 PHP
php加密解密字符串示例
2016/10/13 PHP
php 数组处理函数extract详解及实例代码
2016/11/23 PHP
javascript firefox 自动加载iframe 自动调整高宽示例
2013/08/27 Javascript
js取消单选按钮选中示例代码
2013/11/14 Javascript
点击显示指定元素隐藏其他同辈元素的方法
2014/02/19 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python通过PIL获取图片主要颜色并和颜色库进行对比的方法
2015/03/19 Python
解决Python中由于logging模块误用导致的内存泄露
2015/04/23 Python
Python psutil模块简单使用实例
2015/04/28 Python
python实现京东秒杀功能
2018/07/30 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
Python魔法方法功能与用法简介
2019/04/04 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
使用HTML5中的contentEditable来将多行文本自动增高
2016/03/01 HTML / CSS
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
屈臣氏官方旗舰店:亚洲享负盛名的保健及美妆零售商
2019/03/15 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
what is the difference between ext2 and ext3
2015/08/25 面试题
物理教学随笔感言
2014/02/22 职场文书
学校招生宣传广告词
2014/03/19 职场文书
企业消防安全责任书
2014/07/23 职场文书
2015年法制宣传月活动总结
2015/03/26 职场文书
导游词之桂林山水
2019/09/20 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
js Proxy的原理详解
2021/05/25 Javascript
Python 如何实现文件自动去重
2021/06/02 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技