优雅的在React项目中使用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
|-- index.js 项目入口
准备工作
第1步:提供默认值,既然用Redux来管理数据,那么数据就一定要有默认值,所以我们将state的默认值统一放置在state.js文件
/**
* 步骤一
* state.js
* 设置默认值
* yarn add redux
* yarn add react-redux
* yarn add redux-thunk
*/ // 声明默认值
// 这里我们列举两个示例
// 同步数据:pageTitle
// 异步数据:infoList(将来用异步接口获取)
export default {
pageTitle: '首页',
infoList: []
}
第2步:创建reducer,它就是将来真正要用到的数据,我们将其统一放置在reducers.js文件
/**
* 步骤二
* reducers.js
* 创建 reducer
*/ // 工具函数,用于组织多个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
*/ // action也是函数
export function setPageTitle (data) {
return (dispatch, getState) => {
dispatch({
type: 'SET_PAGE_TITLE',
data: data
});
}
} export function setInfoList (data) {
return (dispatch, getState) => {
// 测试接口
let url = 'http://localhost:8000/user';
// 使用fetch实现异步请求
window.fetch(url, {
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
* 创建store实例
*/ // 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
开始使用
首先,我们来编写应用的入口文件index.js
/**
* 入口文件
* index.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);
this.state = {};
} // 生命周期--组件加载完毕
componentDidMount () {
// 组件传值
let { setPageTitle, setInfoList } = this.props; // 触发setPageTitle action
setPageTitle('新的标题'); // 触发setInfoList action
setInfoList();
} render() {
// 通过mapStateToProps的映射,从props中解钩store
let { pageTitle, infoList } = this.props; // 使用 store
return (
<div>
<h1>{pageTitle}</h1>
{
infoList.length > 0 ? (
<ul>
{
infoList.map((item, index) => {
return (
<li key={item.id}>{item.name}</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
结语
以上就是在React项目中使用Redux的简单示例,文中代码可能会有编写错误,欢迎指正,同事希望本文对大家有所帮助
参考
效果图
优雅的在React项目中使用Redux的更多相关文章
- 如何优雅地在React项目中使用Redux
前言 或许你当前的项目还没有到应用Redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用Redux 概念 首先我们会用到哪些框架和工具呢? React UI框架 Redux 状态管理工具,与 ...
- 如何在非 React 项目中使用 Redux
本文作者:胡子大哈 原文链接:https://scriptoj.com/topic/178/如何在非-react-项目中使用-redux 转载请注明出处,保留原文链接和作者信息. 目录 1.前言 2. ...
- 在react项目中使用redux or mobx?
主要比较参数: 库体积,打包项目体积 开发体验 性能对比 在对比参数前首先分析一下redux和mobx的设计模式,redux和mobx都没有使用传统的mvc/mvvm形式,而且他们使用flux结构也略 ...
- redux在react项目中的应用
今天想跟大家分享一下redux在react项目中的简单使用 1 1.redux使用相关的安装 yarn add redux yarn add react-redux(连接react和redux) 2. ...
- react项目中引入了redux后js控制路由跳转方案
如果你的项目中并没有用到redux,那本文你可以忽略 问题引入 纯粹的单页面react应用中,通过this.props.history.push('/list')就可以进行路由跳转,但是加上了redu ...
- 深入浅出TypeScript(5)- 在React项目中使用TypeScript
前言 在第二小节中,我们讨论了利用TypeScript创建Web项目的实现,在本下节,我们讨论一下如何结合React创建一个具备TypeScript类型的应用项目. 准备 Webpack配置在第二小节 ...
- react项目中实现元素的拖动和缩放实例
在react项目中实现此功能可借助 react-rnd 库,文档地址:https://github.com/bokuweb/react-rnd#Screenshot .下面是实例运用: import ...
- React项目中实现右键自定义菜单
最近在react项目中需要实现一个,右键自定义菜单功能.找了找发现纯react项目里没有什么工具可以实现这样的功能,所以在网上搜了搜相关资料.下面我会附上完整的组件代码. (注:以下代码非本人原创,具 ...
- React项目中使用Mobx状态管理(二)
并上一节使用的是普通的数据状态管理,不过官方推荐使用装饰器模式,而在默认的react项目中是不支持装饰器的,需要手动启用. 官方参考 一.添加配置 官方提供了四种方法, 方法一.使用TypeScrip ...
随机推荐
- 并发-5CAS与AQS
juc: java.util.concurrent 锁: 悲观锁:写的比较多,对数据的增删改,读(查)少.Lock 乐观锁:反之,读多写少.版本 并发编程之 CAS 的原理 什么是CAS CAS (c ...
- Java 序列化Serializable详解(附详细例子)
Java 序列化Serializable详解(附详细例子) 1.什么是序列化和反序列化Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是 ...
- BZOJ2212【POI2011】ROT:Tree Rotation 线段树合并
题意: 给一棵n(1≤n≤200000个叶子的二叉树,可以交换每个点的左右子树,要求叶子遍历序的逆序对最少. 分析: 求逆序对我们可以想到权值线段树,所以我们对每个点建一颗线段树(为了避免空间爆炸,采 ...
- jenkins构建项目记录1
jenkins安装见上篇随笔 1.新建任务 2.构建一个自由风格的软件项目 3.源码管理设置 4.构建环境 5.构建 6.构建后操作
- Python使用Flask框架,结合Highchart,自定义导出菜单项目及顺序
参考链接: https://www.highcharts.com.cn/docs/export-module-overview https://api.hcharts.cn/highcharts#ex ...
- 树莓派 -- 输入设备驱动 (key) 续2: 转载 Setting up a GPIO-Button “keyboard” on a Raspberry Pi
使用device-tree (DT) overlay应该是更方便的方法: http://blog.gegg.us/2017/01/setting-up-a-gpio-button-keyboard-o ...
- jmeter 性能插件
mv jmeter-plugins-manager-0.16.jar /usr/local/Cellar/jmeter/3.1/libexec/lib/ext http://www.cnblogs.c ...
- rbac组件之角色操作(二)
为了与stark组件分离,形成独立的模块,所以rbac数据表的操作需要单独进行操作,对角色表的操作. urls.py urlpatterns = [ re_path(r'^roles/list/$', ...
- python书籍推荐:Python数据科学手册
所属网站分类: 资源下载 > python电子书 作者:today 链接:http://www.pythonheidong.com/blog/article/448/ 来源:python黑洞网 ...
- 第二周习题O题
Description Given a graph (V,E) where V is a set of nodes and E is a set of arcs in VxV, and an or ...