优雅的在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 相关文章推荐
些很实用且必用的小脚本代码
Jun 26 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
浏览器打开层自动缓慢展开收缩实例代码
Jul 04 Javascript
js控制表单操作的常用代码小结
Aug 15 Javascript
Js base64 加密解密介绍
Oct 11 Javascript
Javascript中的Prototype到底是什么
Feb 16 Javascript
JavaScript实现简单Tip提示框效果
Apr 20 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
微信小程序抽奖组件的使用步骤
Jan 11 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
php数组函数序列之array_keys() - 获取数组键名
2011/10/30 PHP
叫你如何修改Nginx与PHP的文件上传大小限制
2014/09/10 PHP
Zend Framework上传文件重命名的实现方法
2016/11/25 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
可插入图片的TEXT文本框
2013/12/27 Javascript
模拟一个类似百度google的模糊搜索下拉列表
2014/04/15 Javascript
JavaScript使用DeviceOne开发实战(三)仿微信应用
2015/12/02 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
jQuery实现模拟flash头像裁切上传功能示例
2016/12/11 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
Vue实现购物车场景下的应用
2017/11/27 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
JS eval代码快速解密实例解析
2020/04/23 Javascript
使用python实现rsa算法代码
2016/02/17 Python
python微信好友数据分析详解
2018/11/19 Python
python实现在线翻译功能
2020/03/03 Python
在python中实现求输出1-3+5-7+9-......101的和
2020/04/02 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
StudentUniverse英国:学生航班、酒店和旅游
2019/08/25 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
英智兴达软件测试笔试题
2016/10/12 面试题
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
集体婚礼策划方案
2014/02/22 职场文书
施工现场安全管理制度
2015/08/05 职场文书
优秀家长事迹材料(2016推荐版)
2016/02/29 职场文书
李清照的诗词赏析(20首)
2019/08/22 职场文书
陶瓷类经典广告语集锦
2019/10/25 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python