Redux之useSelector、useDispatch

React Redux 从 v7.1.0 开始支持 Hook API 并暴露了 useDispatch 和 useSelector 等 hook。以替代 Redux connect()，减少代码

useSelector 替代 mapStateToProps，从store中提取state数据
useDispatch 替代 mapDispatchToProps，从store中获取dispatch方法的引用

类组件中connect(mapStateToProps, mapDispatchToProps)的使用方法：(传送门)

import { Component } from 'react';
import { connect } from 'react-redux';class List extends Component {render() {return (<div><label htmlFor="input">输入内容</label><input id="input" type="text" value={this.props.myValue} onChange={this.props.changeInput} /></div>);}
}// 把state数据映射到props中
// 这样在jsx中就可以用this.props.myValue来代替this.state.myValue获取值
const mapStateToProps = state => {return {myValue: state.myValue,};
};// 把store.dispatch()挂载到props上
// 这样在jsx中就可以用this.props.changeInput来代替store.dispatch()改变store里的数据
const mapDispatchToProps = dispatch => {return {changeInput(e){const action = {type: 'change_input',value: e.target.value,};dispatch(action);}};
};// List是 UI 组件，VisibleList 就是由 React-Redux 通过connect方法自动生成的容器组件。
export const VisibleList = connect(mapStateToProps, mapDispatchToProps)(List);

函数式组件中利用 useSelector、useDispatch等HooksApi替代connect(mapStateToProps, mapDispatchToProps)的使用方法：

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';export const List = () => {const myValue= useSelector(state => state.myValue); // 从store中提取state数据const dispatch = useDispatch(); // 从store中获取dispatch方法的引用const changeInput = (e) => {const action = {type: 'change_input',value: e.target.value,};dispatch(action);}return (<div><label htmlFor="input">输入内容</label><input id="input" type="text" value={myValue} onChange={changeInput} /></div>);
}

不用写一堆繁琐的 connect、mapStateToProps、mapDispatchToProps 了，直接使用 hook函数 对 redux 全局数据进行操作。

超级简单 ~
超级舒服 ~

Redux之useSelector、useDispatch相关推荐

2023新春版：看这篇大宝典就够了！从零搭建React项目全家桶
React是近年来前端开发领域非常热门的技术框架,其背景是Facebook团队的技术支持,在全球的前端开发市场上占有率很高.结合React丰富的社区资源,可以让项目开发如虎添翼.虽然React的学习门 ...
在 React 项目中全量使用 Hooks
目录前言 React Hooks useState useReducer 基础用法进阶用法 useContext useEffect useLayoutEffect useRef useImper ...
React学习笔记——Hooks中useStore、useDispatch和useSelector的基础介绍和使用,以及两者替代connect
在 React 的世界中,有容器组件和 UI 组件之分,在 React Hooks 出现之前,UI 组件我们可以使用函数,无状态组件来展示 UI,而对于容器组件,函数组件就显得无能为力,我们依赖于类组 ...
react-redux 中使用useSelector、useDispatch
1. react-redux 之 Hooks api Hooks 提供了很多好用的api,甚至很多人认为Hooks的useReducer等Api已经可以取代Redux了.其实Hooks和Redux的使 ...
redux异步action_Redux数据状态管理
Redux 中文文档(https://www.redux.org.cn/) Redux入门教程(快速上手)(https://segmentfault.com/a/1190000011474522?fr ...
使用redux和axios获取api数据
使用redux,我们可以轻松管理状态.因为如果您的组件需要共享和更新状态,那么就需要它.在本篇文章中,我将为您提供完整的redux设置,其中包括带有axios调用api获取数据的示例. 因此,让我们开 ...
redux及react-redux
redux 这篇文章谈一谈仓库redux. 首先,学习任何东西都离不开官网.在此附上官网网址 Redux - A predictable state container for JavaScript ...
由redux到react-redux再到rematch
这比较适合看过redux但看了跟没看一样的同学,帮助记忆理清里面的基础知识一. Redux 1. Store Store是保存数据的地方,可以把它看做一个容器.整个应用只能有一个Store. Red ...
原理实践 SSR中redux的使用
原理实践 SSR中redux的使用文章目录原理实践 SSR中redux的使用 @reduxjs/toolkit 主要API 快速上手创建使用 redux在SSR中的使用安装 yarn add ...

Redux之useSelector、useDispatch

Redux之useSelector、useDispatch相关推荐

最新文章

热门文章