汕头建站模板,成功网站运营案例,网站关键词排名下降,做网站建设个体经营小微企业#x1f308;个人主页#xff1a;前端青山 #x1f525;系列专栏#xff1a;React篇 #x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-Redux#xff08;二#xff09; 目录
react-redux
模块化
redux-thunk
react-redu…
个人主页前端青山 系列专栏React篇 人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-Redux二 目录
react-redux
模块化
redux-thunk
react-redux
网址React Redux | React Redux
React-Redux是Redux的官方针对React开发的扩展库默认没有在React项目中安装需要手动来安装。react-redux是依赖于redux所以必须先安装redux。
我们可以理解为react-redux就是redux给我们提供的高阶组件加工厂。
npm i -S react-redux
React-redux所能解决的问题是 使用它以后我们不需要在每个组件中再去 手动订阅数据的更新了。 没有了数据的初始化state赋值当前组件自身state和这个redux不冲突了 使用本节的react-redux与下一节的redux-thunk并不是为了简化代码的它们存在的意义是解决前面所遇到的问题
使用步骤 在项目入口文件中定义Provider 该步骤的操作有点类似于之前组件通信中的context那块的操作 将整个仓库作为商品提供给App根组件后续的所有的组件都可以获取到仓库store中的数据 注意与context不一样这里绑定数据使用的属性是“store” src/index.js文件中的示例代码 // 导入
import React from react;
import ReactDOM from react-dom;
// 导入provider
import { Provider } from react-redux;
import store from ./store/index;
// 导入需要展示的组件
import App from ./Login;
// 渲染视图
// 在展示app组件的时候需要按照组件的形式进行操作
ReactDOM.render(Provider store{store}App/App/Providerdocument.getElementById(root)
); 在需要使用redux的组件中使用 这个步骤与vuex中map系列函数mapStatemapMutationsmapActions、mapGetters的思想是一样的 思想将仓库中的属性和方法映射成当前组件自身的属性和方法 在实际使用的时候组件中不再需要使用store对象了包括初始的获取数据store.getState()、store.dispatch(、store.subscribe() 步骤 在需要使用reudx的组件前面导入react-redux提供的高阶组件connect 编写映射方法请注意这个方法映射不是类组件的方法而是在类组件外写的方法 mapStateToProps(state) 作用将仓库中的state数据源映射成本组件的属性props返回一个props对象 参数仓库中的state mapDispatchToProps(dispatch) 作用将派发action的方法映射成当前组件自身的属性该方法也要求返回一个对象该对象中存放的就是派发action的方法集合 参数dispatch如同之前的store.dispatch() 编写时可以写箭头函数也可以写常规函数 应用高阶组件connect写法是固定的 // 在组件最后导出的时候改写成如下
export default connect(mapStateToProps,mapDispatchToProps)(ComponentName) 组件中实际使用时的参考代码以jsx为例 import React, { Component } from react;
// 需要导入store
// import store from ../store/index;
// 导入action创建模块导出里面全部的方法
import * as actionCreate from ../store/actions/index;
// 导入type
import { MOD_COUNT, MOD_AGE } from ../store/types/index;
// import * as types from ../store/types/index;
// 第一步在需要使用redux组件中导入一个由react-redux提供的hoc
import { connect } from react-redux;
class Counter extends Component {// 在constructor中获取store中的数据constructor(props) {super(props);// 获取store数据一次性不具备响应式// this.state store.getState();// 订阅数据的更新// store.subscribe(() this.setState(() store.getState()));}render() {console.log(this.state);return (divdiv当前Store中的数据是{this.props.tool.count}/divbutton onClick{this.props.addCount}点击9/buttonhr /div当前Store中的数据是{this.props.user.age}/divbutton onClick{this.props.addAge}点击1/button/div);}
}
// 第二步在类外面定义俩个映射方法
// 将redux中的state数据源映射到本组件自身的props中
function mapStateToProps(state) {// return state.user;// return state.tool;return state;
}
// 将dispatch映射成自身组件的props
function mapDispatchToProps(dispatch) {// 该方法返回一个对象对象中都是方法return {addCount() {dispatch(actionCreate.createAction(MOD_COUNT, 9));},addAge() {dispatch(actionCreate.createAction(MOD_AGE, 1));},};
}
// 第三步应用HOC
// connect函数的俩个参数顺序不能颠倒
export default connect(mapStateToProps, mapDispatchToProps)(Counter); 模块化 如果redux需要使用多个模块请使用combineReducers方法将多个reudcer函数进行组合得到一个根reducer对象将对象传递给创建仓库的方法Redux Fundamentals, Part 3: State, Actions, and Reducers | Redux 针对redux的模块化在一个常规项目中会将其代码拆分成以下几个部分 Reducers建立同名目录存放模块化之后的reducer Actions建立同名目录存放模块化之后的action Type可选建立同名目录存放独立的type声明
具体实现以项目的代码为准。 面试题如果项目有100甚至更多个reducer模块后续就得import100次甚至更多次虽然代码简单但是很繁琐请问如何优化
// 代码优化批量导入
const files require.context(./reducers, false, /\.js$/);
// 比较固定的处理代码
let members {}; // 组合成员用的
files.keys().forEach((element) {// element是对应的模块文件的路径console.log(element);// 依据路径获取导出的成员let member files(element).default;// 获取文件名充当对象的属性名let filename element.replace(/(.*\/)*([^.]).*/gi, $2);// 组合成员members[filename] member;});
console.log(members); redux-thunk
通常情况下action只是一个对象不能包含异步操作这导致了很多创建action的逻辑只能写在组件中代码量较多也不便于复用同时对该部分代码测试的时候也比较困难组件的业务逻辑也不清晰使用中间件了之后可以通过actionCreator异步编写action这样代码就会拆分到actionCreator中可维护性大大提高可以方便于测试、复用同时actionCreator还集成了异步操作中不同的action派发机制减少编码过程中的代码量。 常见的异步库 Redux-thunk Redux-saga Redux-effects Redux-side-effects Redux-loop Redux-observable …
基于Promise的异步库 Redux-promise Redux-promises Redux-simple-promise Redux-promise-middleware …
这里我们使用一个Redux官方出品的中间件库redux-thunk
在使用前需要先安装这个中间件
npm i -S redux-thunk
步骤 在仓库的创建文件store/index.js文件中导入中间件的应用方法再去导入redux-thunk并且应用 导入redux提供的中间件使用的方法applyMiddleware 会产生报错浏览器的redux调试工具的报错需要解决 解决思路查看 [插件的项目主页] https://github.com/zalmoxisus/redux-devtools-extension#usage 找解决办法 修改为的配置如下 // 解决插件报错的操作
const composeEnhancers window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store createStore(// 合并多个reducer整合数据源,不合并会报错combineReducers({ counter, global }),// 应用中间件composeEnhancers(applyMiddleware(thunk))// 必须要加上一段插件的配置工具才能在浏览器中使用redux扩展// window.__REDUX_DEVTOOLS_EXTENSION__ window.__REDUX_DEVTOOLS_EXTENSION__()
); 去需要做异步处理的action的位置去使用异步实现通过dispatch派发action // - 异步方法载荷可能是异步获取的数据
export const createActionAsync (type, payload) {// 异步代码先不写暂时没有异步中间件// return { type, payload };// setTimeout(() {// return { type, payload };// }, 1000);
// 异步写法return (dispatch) {setTimeout(() {dispatch({ type, payload });}, 3000);};
};
