详解如何优雅地在React项目中使用Redux
前言
或许你当前的项目还没有到应用redux的程度,但提前了解一下也没有坏处,本文不会安利大家使用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 |-- 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
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三大原则
1、单一数据源
整个应用的 state 被储存在一棵 object tree 中,并且这个 object tree 只存在于唯一一个 store 中
2、state 是只读的
唯一改变 state 的方法就是触发 action,action 是一个用于描述已发生事件的普通对象
3、使用纯函数来执行修改
为了描述 action 如何改变 state tree ,你需要编写 reducers
结语
以上就是在react项目中使用redux的简单示例,文中代码可能会有编写错误,欢迎指正,同时希望本文对大家有所帮助,也希望大家多多支持。
上一篇: vue获取dom元素注意事项
下一篇: 厦门电信“桌面云”覆盖城市社区