优雅的在React项目中使用Redux的方法
或许你当前的项目还没有到应用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跳转页面和打开新窗口等方法代码实现
下一篇: conda无法使用的解决方法
推荐阅读
-
优雅的在React项目中使用Redux的方法
-
在Python中处理字符串之ljust()方法的使用简介
-
在 Vue.js中优雅地使用全局事件的方法
-
在PHP中设置、使用、删除Cookie的解决方法_PHP
-
在 React、Vue项目中使用SVG的方法
-
在php中使用swoole扩展时,server端的回调函数中如何使用thinkphp框架的方法?
-
在Centos中yum安装和卸载软件的使用方法
-
在Python中处理时间之clock()方法的使用
-
[JAVA IDEA]在使用maven项目中,无法读取resources文件夹中的配置文件的一种解决方案
-
在java中对LIst集合的两种排序方法(即sort的使用方法)