详解如何优雅地在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 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
Jul 14 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
javascript屏蔽右键代码
May 15 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
javascript动态创建链接的方法
May 13 Javascript
JS实现页面跳转参数不丢失的方法
Nov 28 Javascript
旺旺在线客服代码 旺旺客服代码生成器
Jan 09 Javascript
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
原生JavaScript实现滑动拖动验证的示例代码
Dec 06 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 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上传图片、删除图片实现代码
2010/05/12 PHP
PHP调用Webservice实例代码
2011/07/29 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
windows 2008r2+php5.6.28环境搭建详细过程
2019/06/18 PHP
laravel5.5添加echarts实现画图功能的方法
2019/10/09 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
javascript this用法小结
2008/12/19 Javascript
基于jquery的兼容各种浏览器的iframe自适应高度的脚本
2010/08/13 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
2013/01/16 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
Array栈方法和队列方法的特点说明
2014/01/24 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
浅谈js中调用函数时加不加括号的问题
2016/07/28 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
javascript实现评分功能
2020/06/24 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
2017/12/28 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python list多级排序知识点总结
2019/10/23 Python
利用python在excel中画图的实现方法
2020/03/17 Python
python 装饰器的使用示例
2020/10/10 Python
J2EE系统只能是基于web
2015/09/08 面试题
辩论赛主持词
2014/03/18 职场文书
主题实践活动总结
2014/05/08 职场文书
为自己工作观后感
2015/06/11 职场文书
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers