详解如何优雅地在React项目中使用Redux


Posted in Javascript onDecember 28, 2017

前言

或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux

概念

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

React

UI框架

Redux

状态管理工具,与React没有任何关系,其他UI框架也可以使用Redux

react-redux

React插件,作用:方便在React项目中使用Redux

react-thunk

中间件,作用:支持异步action

目录结构

Tips:与Redux无关的目录已省略

|--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

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三大原则

1、单一数据源

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

2、State 是只读的

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

3、使用纯函数来执行修改

为了描述 action 如何改变 state tree ,你需要编写 reducers

结语

以上就是在React项目中使用Redux的简单示例,文中代码可能会有编写错误,欢迎指正,同时希望本文对大家有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
基于jQuery实现的旋转彩圈实例
Jun 26 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
Apr 29 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
详解JavaScript模块化开发
Dec 04 Javascript
Angular开发实践之服务端渲染
Mar 29 Javascript
AngularJS日期格式化常见操作实例分析
May 17 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
解决layui调用自定义方法提示未定义的问题
Sep 14 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
插件导致ECharts被全量引入的坑示例解析
Sep 23 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
Dec 28 #Javascript
JS实现带动画的回到顶部效果
Dec 28 #Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 #Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 #Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
Dec 28 #Javascript
vue获取dom元素注意事项
Dec 28 #Javascript
vue实现文章内容过长点击阅读全文功能的实例
Dec 28 #Javascript
You might like
php二分查找二种实现示例
2014/03/12 PHP
值得分享的php+ajax实时聊天室
2016/07/20 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
Web开发之JavaScript
2012/03/29 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
一个字符串反转函数可实现字符串倒序
2014/09/15 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
jQuery仿天猫实现超炫的加入购物车
2015/05/04 Javascript
jQuery zTree树插件简单使用教程
2017/01/10 Javascript
bootstrap vue.js实现tab效果
2017/02/07 Javascript
Vue.js实例方法之生命周期详解
2017/07/03 Javascript
video.js 一个页面同时播放多个视频的实例代码
2018/11/27 Javascript
nodejs异步编程基础之回调函数用法分析
2018/12/26 NodeJs
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
[01:00:14]DOTA2官方TI8总决赛纪录片 真视界True Sight
2019/01/16 DOTA
Python解析树及树的遍历
2016/02/03 Python
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
浅谈django 重载str 方法
2020/05/19 Python
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
移动端开发HTML5页面点击按钮后出现闪烁或黑色背景的解决办法
2018/09/19 HTML / CSS
vivo智能手机官方商城:vivo
2016/09/22 全球购物
荷兰领先的百货商店:De Bijenkorf
2018/10/17 全球购物
用你熟悉的语言写一个连接ORACLE数据库的程序,能够完成修改和查询工作
2012/06/11 面试题
岗位竞聘演讲稿
2014/01/10 职场文书
行政人事专员岗位职责
2014/03/05 职场文书
防火标语大全
2014/10/06 职场文书
2014年少先队工作总结
2014/12/03 职场文书
业务员辞职信范文
2015/03/02 职场文书
公司年会主持词范文!
2019/05/07 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
数据库之SQL技巧整理案例
2021/07/07 SQL Server
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏