优雅的在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 相关文章推荐
ExtJS GTGrid 简单用户管理
Jul 01 Javascript
最佳的addEvent事件绑定是怎样诞生的
Oct 24 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
纯JavaScript实现获取onclick、onchange等事件的值
Dec 29 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
详谈AngularJs 控制器、数据绑定、作用域
Jul 09 Javascript
Angular使用操作事件指令ng-click传多个参数示例
Mar 27 Javascript
vue filters的使用详解
Jun 11 Javascript
js实现时间日期校验
May 26 Javascript
js实现批量删除功能
Aug 27 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中获取指定IP的物理地址的代码(正则表达式)
2011/06/23 PHP
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
php通过正则表达式记取数据来读取xml的方法
2015/03/09 PHP
php-redis中的sort排序函数总结
2015/07/08 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
PHP延迟静态绑定的深入讲解
2018/04/02 PHP
laravel使用Faker数据填充的实现方法
2019/04/12 PHP
phpinfo的知识点总结
2019/10/10 PHP
window.onbeforeunload方法在IE下无法正常工作的解决办法
2010/01/23 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
js调试系列 断点与动态调试[基础篇]
2014/06/18 Javascript
Javascript Objects详解
2014/09/04 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
JavaScript中的高级函数
2018/01/04 Javascript
vue form 表单提交后刷新页面的方法
2018/09/04 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
layui写后台表格思路和赋值用法详解
2019/11/14 Javascript
实现vuex原理的示例
2020/10/21 Javascript
Python 字符串中的字符倒转
2008/09/06 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
python爬虫的数据库连接问题【推荐】
2018/06/25 Python
numpy.random模块用法总结
2019/05/27 Python
pytorch读取图像数据转成opencv格式实例
2020/06/02 Python
Python3爬虫关于识别点触点选验证码的实例讲解
2020/07/30 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
FC-Moto丹麦:欧洲最大的摩托车服装和头盔商店之一
2019/08/20 全球购物
空指针到底是什么
2012/08/07 面试题
2014年导购员工作总结
2014/11/18 职场文书
我去timi了,一起去timi是什么意思?
2022/04/13 杂记
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android