详解如何优雅地在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_03(ExtJs Grid的简单使用)
Oct 02 Javascript
弹出最简单的模式化遮罩层的js代码
Dec 04 Javascript
javascript实现的一个带下拉框功能的文本框
May 08 Javascript
JavaScript中最简洁的编码html字符串的方法
Oct 11 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
Apr 03 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
浅谈js多维数组和hash数组定义和使用
Jul 27 Javascript
Require.js的基本用法详解
Jul 03 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
使用Vue调取接口,并渲染数据的示例代码
Oct 28 Javascript
浅谈vant组件Picker 选择器选单选问题
Nov 04 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
轻松修复Discuz!数据库
2008/05/03 PHP
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php实现读取手机客户端浏览器的类
2015/01/09 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
jQuery拖动图片删除示例
2013/05/10 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
JavaScript 学习笔记之变量及其作用域
2015/01/14 Javascript
jQuery读取XML文件内容的方法
2015/03/09 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
详解Vuex下Store的模块化拆分实践
2019/07/31 Javascript
Javascript Worker子线程代码实例
2020/02/20 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[40:57]TI4 循环赛第二日 iG vs EG
2014/07/11 DOTA
python检测远程端口是否打开的方法
2015/03/14 Python
Python正则获取、过滤或者替换HTML标签的方法
2016/01/28 Python
python3.5绘制随机漫步图
2018/08/27 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
Python argparse模块使用方法解析
2020/02/20 Python
pyspark给dataframe增加新的一列的实现示例
2020/04/24 Python
在pytorch中动态调整优化器的学习率方式
2020/06/24 Python
python实现双人五子棋(终端版)
2020/12/30 Python
python Scrapy爬虫框架的使用
2021/01/21 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
CSS3 实现的缩略图悬停效果
2020/12/09 HTML / CSS
Myprotein台湾官方网站:全球领先的运动营养品牌
2018/12/10 全球购物
英国排名第一的宠物店:PetPlanet
2020/02/02 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
盲山观后感
2015/06/11 职场文书
严以用权学习心得体会
2016/01/12 职场文书
创业计划书之便利店
2019/09/05 职场文书
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL