react 的redux connect方法封装使用--笔记记录

71 阅读 0 评论 47 点赞

我是靠谱客的博主复杂纸飞机，最近开发中收集的这篇文章主要介绍react 的redux connect方法封装使用--笔记记录，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1、redux封装的目的
redux 完成全局状态数据的封装，同时提供对应的辅助函数，快速完成state数据的组件化绑定dispatch方法的组件化绑定。
2、封装
首先在store文件夹中创建actions.js文件，对外提供各种actions修改数据的操作。

//用来完成不同数据的更改
const mutations = {
increment(state){
return {
count:++state.count
}
},
decrease(state){
return {
count:--state.count
}
},
cover(state, count){
return {
count:count
}
},
changeBack(state, back){
//设置返回按钮的显示或者隐藏
return {
back
}
},
changeTitle(state, title){
//设置导航条标题
return {
title
}
},
changeBarIndex(state, index){
//修改tabbar每一个barItem被点击的下标
return {
barIndex:index-1
}
},
changeTabBarShow(state, show){
//修改TabBar显示或者隐藏
return {
tabShow:show
}
}
};
export default mutations

2、引入
在 index.js 中导入 actions.js ，同时封装reducer函数，使reducer具备通用功能。同时reducer返回的state是actions中处理以后的state和之前的state的合并数据。

import { createStore } from 'redux'
// 导入封装的方法
import mutations from "./actions"
// 定义数据源
let defaultStore = { count: 0, title: "首页", back: false, selectBarIndex: 0, isTabBarShow: true };
// 定义reducer函数，该变量是一个函数
const reducer = function (state = defaultStore, action) {
// 区分是否需要携带参数action 干预state的值
let newState = null;
// hasOwnProperty 判断是否存在 有还是没有
if (action.hasOwnProperty('params')) {
// action.type 是mutations 的键名
newState = mutations[action.type] ? mutations[action.type](state, action.params) : state;
} else {
//如果props为空说明外界更改数据不需要依托外部传递的数据
newState = mutations[action.type] ? mutations[action.type](state) : state;
}
// 析构添加新的数据 旧的数据覆盖 保存所有的数据
return { ...state, ...newState };
}
let store = createStore(reducer);
export default store

3、封装connect函数调用

// 封装connect 函数调用
// myComponent 代表需要绑定的组件
stateData 数组类型，代表需要绑定的状态数据的名称
import { connect } from 'react-redux'
let mapState = function (myComponent, stateData) {
// state 从当前组件中拿出
const mapStateToProps = (state) => {
// 保存映射的关系
let states = {};
for (let index in stateData) {
// 拿store的state里面的键值给新的对象 关联映射
states[stateData[index]] = state[stateData[index]];
}
// 返回 给了当前组件的props
return states;
}
// 创建容器组件 将数据绑定给指定的组件 ，并且将绑定的结果返回给外界
return connect(mapStateToProps)(myComponent)
}
// 为了组件添加修改 store中的state操作
// 方法封装
actions 所有注册的方法名字
let mapDispatch = function (myComponent, actions) {
function mapDispatchToProps(dispatch) {
// 空对象 保存所有方法 当前对象所有保存的映射方法，都是给当前组件的props
// actions == [{ type: "changeTitle", params: true }, { type: "changeBack", params: true }]
let dispatchs = {};
// 循环注册方法，返回给当前组件
for (let index in actions) {
// 取出当前要注册的函数配置
let action = actions[index];
// 判断是否有参数需要传递到store内部
if (action.params) {
// 函数定义 向对象中添加函数
dispatchs[action.type] = (params) => {
// 当被触发时，向store传递action,要求state数据改变
dispatch({
...action,
params
})
}
} else {
// 当被触发时，向store传递action,要求state数据改变
dispatchs[action.type] = () => {
// 修改逻辑严谨问题
dispatch({ type: action.type })
}
}
}
console.log(dispatchs);
return dispatchs;
}
// mapDispatchToProps 会在内部生成一个对象，对象是一个键值对，键是方法名，键对应的值是函数体。此对象会被connect 传递到 myComponent 变量代表的组件的props中。所以哦我们在myComponent的组件中使用，this.props.键名
// connect 函数吧 mapDispatchToProps执行的结果（dispatchs）传递给myComponent 的变量的组件的props对象中 . 一句话： 把dispatchs对象和props对象合并
// 容器组件
return connect(null, mapDispatchToProps)(myComponent)
}
export { mapState, mapDispatch }