优雅的在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创建和操作表格的函数集合
May 07 Javascript
javascript 自动填写表单的实现方法
Apr 09 Javascript
JavaScript 原型继承
Dec 26 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
JS实现网页标题栏显示当前时间和日期的完整代码
Nov 02 Javascript
详解jQuery停止动画——stop()方法的使用
Dec 14 Javascript
Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)
May 10 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
微信小程序渲染性能调优小结
Jul 30 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
Mar 03 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
VUE中V-IF条件判断改变元素的样式操作
Aug 09 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
实用函数8
2007/11/08 PHP
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php检测url是否存在的方法
2015/04/14 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
JavaScript获取网页中第一个链接ID的方法
2015/04/03 Javascript
js中获取键盘事件的简单实现方法
2016/10/10 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
jQuery基于Ajax方式提交表单功能示例
2017/02/10 Javascript
Google 爬虫如何抓取 JavaScript 的内容
2017/04/07 Javascript
Layui实现主窗口和Iframe层参数传递
2019/11/14 Javascript
继承行为在 ES5 与 ES6 中的区别详解
2019/12/24 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python操作sqlite3快速、安全插入数据(防注入)的实例
2014/04/26 Python
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
Python字典操作简明总结
2015/04/13 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python之Scrapy爬虫框架安装及使用详解
2017/11/16 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python multiprocessing多进程原理与应用示例
2019/02/28 Python
华为2019校招笔试题之处理字符串(python版)
2019/06/25 Python
python爬虫利器之requests库的用法(超全面的爬取网页案例)
2020/12/17 Python
css3的动画特效之动画序列(animation)
2017/12/22 HTML / CSS
英国电器零售商:PRC Direct
2018/06/21 全球购物
文职个人求职信范文
2013/09/23 职场文书
兼职业务员岗位职责
2014/01/01 职场文书
婚礼证婚人证婚词
2014/01/08 职场文书
小学运动会广播稿200字(十二篇)
2014/01/14 职场文书
单位实习证明怎么写
2014/01/17 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
2015年元旦标语大全
2014/12/09 职场文书
房地产销售主管岗位职责
2015/02/13 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python