Redux + TypeScript和mapDispatchToProps
Redux是一种用于管理JavaScript应用程序状态的开源JavaScript库。它可以与React或其他视图库一起使用，提供了一种可预测性、可维护性和可测试性的方式来管理应用程序状态。
Redux的核心概念包括store、action和reducer。store是一个包含应用程序状态的单一对象，action是描述应用程序状态变化的对象，reducer是一个纯函数，用于根据接收到的action来更新状态。
TypeScript是一种由Microsoft开发的开源编程语言，是JavaScript的超集。它添加了静态类型检查和其他面向对象的特性，提供了更好的代码组织和可维护性。
mapDispatchToProps是一个Redux中的辅助函数，用于将action创建函数绑定到store上，使得可以在组件中通过props调用这些函数来触发状态更新。
使用Redux + TypeScript的组合可以带来以下优势：
- 类型检查：TypeScript的静态类型检查能够帮助开发者在编译阶段发现潜在的错误，提高代码的健壮性和可维护性。
- 可预测性：Redux提供了一种统一的状态管理方式，使得状态的变化可被预测和追踪，有助于调试和维护复杂的应用程序。
- 可扩展性：Redux的架构使得应用程序状态的变化可通过添加新的reducer和action进行扩展，保持代码的可扩展性。
- 可测试性：Redux的纯函数和单一数据源使得测试变得简单可靠，可以轻松地编写单元测试和集成测试。
Redux + TypeScript在前端开发中的应用场景包括但不限于：
- 大型应用程序：对于具有复杂状态管理需求的大型应用程序，Redux提供了一种结构化的方式来管理状态，使得开发和维护变得更加可控和可预测。
- 跨组件状态共享：当多个组件需要共享状态时，Redux可以作为一个中央存储来管理这些共享状态，使得不同组件之间的通信更加简单和可靠。
- 异步数据流管理：Redux的中间件机制允许开发者在状态变化过程中处理异步逻辑，例如发送网络请求或处理其他副作用。
腾讯云相关产品中提供了一些与Redux + TypeScript开发相关的服务，例如：
- 云函数 SCF（Serverless Cloud Function）：提供基于事件驱动的无服务器函数计算服务，可用于处理Redux中的异步逻辑。
- 云开发 TCB（Tencent CloudBase）：提供全托管的云端一体化开发平台，支持快速开发和部署应用程序，与Redux + TypeScript开发配合使用可以快速搭建完整的应用。
更多关于腾讯云相关产品的信息可以参考腾讯云官方网站：腾讯云官网。
相关·内容
我正在学习redux的react和typescript。我有一个这样的子组件： import ...
interface MainTestProps {
loadData: () => () => void,
students: StudentsModel[],
state: string,
errorMessage?:string
}
interface MainTestState {
}
class MainTest extends React.Component<MainTestProps,MainTestState>{
const
浏览 19提问于2019-02-16得票数 0
我想使用React-Redux和typeScript来分发操作，但是当我使用mapDisPatchToProps()时，我不知道如何定义dispatch的类型，下面是我的代码：
这是组件文件：
import * as React from 'react';
import Content from '../component/content';
interface Props {
allCityInformation: {'cityName': string, 'img': string}[]
浏览 0提问于2017-09-06得票数 0
3回答
我正在尝试结合使用TypeScript来使用Redux状态存储。我正在尝试使用Redux的正式类型，并希望对connect方法(它将mapStatetoProps和mapDispatchToProps与组件连接起来)进行整个调用。
我通常看到一些方法，其中的方法mapStatetoProps和mapDispatchToProps只是自定义类型，并返回部分组件支持，如下所示：
function mapStateToProps(state: IStateStore, ownProps: Partial<IComponentProps>)
: Partial<IProjectE
浏览 1提问于2019-01-12得票数 8
回答已采纳
Redux Promise Middleware似乎可以处理操作负载的promise解析。例如，考虑使用Promise作为有效负载的操作创建者：
export default class ActionCreators {
public static fetchAllUsers(): FetchAction {
return {
type: actionTypes.FETCH_ALL_USERS,
payload: fetch("api.com/users")
};
}
}
使用此操作创建器时，TypeScript期望返回Actio
浏览 13提问于2018-07-27得票数 4
2回答
我正在创建一个使用redux和typescript作为语言的react应用程序。我听从了这个的建议，为mapStateToProps和maptDispatchToProps函数创建类型。这是我的容器：
import { connect } from 'react-redux'
import { AppState } from 'src/store';
import { changeFilter } from 'src/store/tasks/actions';
import { Dispatch } from 'redux';
i
浏览 243提问于2019-04-16得票数 0
回答已采纳
当使用React、Redux和TypeScript时，我试图找出如何减少样板的数量。也许在这种情况下你不能，但你想看看是否有人有想法。
我现在有一个组件，它分发一个操作，切换菜单，在显示和隐藏之间交替。为此，我定义了类似于以下内容的类(省略与状态相关的代码，侧重于操作的分派)：
import {Action, toggleMenu} from "../../actions/index";
interface IConnectedDispatch {
toggleMenu: (isActive: boolean) => Action;
}
class Hea
浏览 3提问于2017-09-05得票数 2
回答已采纳
我是个新手，最近才用过Redux。
下面是我的代码：
import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { connect } from "react-redux";
import { useNavigation } from "@react-navigation/native";
import { controlComponent1 } from "../redux/reduce&#
浏览 16提问于2021-03-05得票数 1
尝试使用typescript和redux构建一个简单的react crud应用程序时，遇到了以下问题。我有一个函数，它有一个指定的签名，它将接受一个person对象作为参数，如下所示。
export default function savePerson(person: Person) {
return async (dispatch: any) => {
let newPerson = await axios.post('/api/people/addPeron', person);
dispatch(addPersonSucce
浏览 6提问于2017-05-06得票数 18
回答已采纳
所以我试着用Redux Thunk输入我的Redux操作
下面是一个操作
export function logout() {
return async(dispatch) => {
try {
const value = localStorage.removeItem("token");
dispatch(cons.updateLoginStatus(false));
return true;
} catch (err) {
console.error(err);
}
}
}
这是连接
浏览 5提问于2018-11-14得票数 0
我有一个关于包的问题。它在包中有类型，所以如果我没理解错的话，typeScript应该自己处理它。但每当我尝试导入它时，我都会看到(5,32): error TS2307: Cannot find module 'reselect'。
代码非常简单：
/// <reference path="../../../../node_modules/reselect/src/reselect.d.ts"/>
import { connect } from 'react-redux';
import Actions from '../
浏览 5提问于2016-07-13得票数 0
这应该很容易，但我现在还不明白，但我觉得这应该是一个简单的解决方案。我目前在typescript中使用redux，在异步操作创建器中使用redux-thunk。 设置很简单。下面是我用来登录的代码： export function requestAuthenticationAsync(email: string, password: string) {
return (dispatch: ThunkDispatch<IState, undefined, IAction>): Promise<void> => {
dispatch(requ
浏览 67提问于2019-10-15得票数 2
回答已采纳
2回答
我是react-redux的新手。我有这个代码，我正在使用react，redux和TypeScript。在这段使用基于类的组件的代码中，我想使用dispatch来调用动作来增加counter的值，但这给了我以下错误。
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of Re
浏览 34提问于2020-02-12得票数 2
回答已采纳
我正在按照教程在Typescript上使用React和Redux构建聊天应用程序，但在导出我的连接组件时遇到错误：
Type 'InferableComponentEnhancerWithProps<ConnectedState & ConnectedDispatch, OwnProps>'
is missing the following properties from type 'Component<OwnProps, {}, any>':
context, setState, forceUpdate, render, a
浏览 10提问于2021-03-10得票数 2
回答已采纳
我继承了一个拥有JavaScript模块和TypeScript模块的应用程序，并且正在使用redux。
不幸的是，我从未使用过TypeScript：
状态定义在.js模块中。所有使用状态的模块也都是.js模块。现在需要在.ts模块中访问状态。
我怎么能这么做？
--这是uiReducer.js:文件中对我的状态的定义
export default function uiReducer(state = new UiState, action) {
switch(action.type) {
...
及其在多个.js模块中使用，如以下示例所示：
const mapStateToProps =
浏览 3提问于2022-03-11得票数 0
回答已采纳
您好，我正在尝试建立一个简单的redux计数器示例在React原生使用Typescript使用此文档https://enappd.com/blog/redux-in-react-native-app/92/，即使该文档使用javascript我正在尝试将代码移植到typescript中。但是我得到了一些错误。这是我的代码。Ps react原生的typescript样板代码是由官方RN文档中使用的Typescript模板完成的 Counts.ts import {COUNTER_CHANGE} from '../constants';
export function chan
浏览 20提问于2020-04-21得票数 0
我正在更新我的项目中的依赖项(redux 4.0.1，redux-thunk 2.3.0，typescript 3.1.3)，而且我很难在我的mapDispatchToProps声明中找到redux-thunk的正确类型。
例如，我有以下操作：
正常剩馀作用
export interface UpdateRowContent {
type: typeof Actions.UPDATE_ROW_CONTENT;
payload: React.ReactNode[];
}
export const updateRowContent: ActionCreator<Action&
浏览 0提问于2018-10-18得票数 2
回答已采纳
我正在开始一个新的项目，发现了一个很好的但有点过时的样板()，用于react - redux和typescript。我使用node-check-updates更新了package.json：
{
"name": "typescript-react-redux-boilerplate",
"version": "1.0.0",
"private": true,
"description": "A frontend boilerplate with React, Redux an
浏览 0提问于2017-10-15得票数 1
我在Typescript中有以下代码。为什么编译器会抛出错误？
import { connect } from 'react-redux';
import React from "react";
import { Link, Redirect } from "react-router-dom";
class HeaderComponent extends React.Component {
render() {
return (
<header>
<
浏览 120提问于2019-08-02得票数 1
回答已采纳
2回答
我试图更好地理解ThunkDispatch函数和TypeScript。得到了使用redux和thunk的代码。
// This is redux-thunk source code
import { Middleware, Action, AnyAction } from "redux";
export interface ThunkDispatch<S, E, A extends Action> {
<T extends A>(action: T): T;
<R>(asyncAction: ThunkAction<R, S,
浏览 2提问于2019-03-20得票数 1
回答已采纳
我正试图采取行动。我找到了一些有用的例子，但没有我的复杂。
你能给我个提示吗？我做错了什么？
我正在使用TypeScript，最近删除了所有类型，并尽可能简化了我的代码。
我用的是redux-thunk和redux-诺言，就像这样：
import { save } from 'redux-localstorage-simple';
import thunkMiddleware from 'redux-thunk';
import promiseMiddleware from 'redux-promise';
const middlewares
浏览 4提问于2018-01-04得票数 10
回答已采纳
我在使用typescript和redux-thunk操作时遇到了一些麻烦。
基本上，我的组件大量使用react-redux connect来绑定动作创建器，问题是，当我在组件中为这个redux动作创建接口时，我必须重新声明函数定义，因为它在connect调用中丢失了。
下面是一个示例代码：
动作创建者
import api from './api';
import { Dispatch } from 'redux';
import { IReduxAction } from 'model';
export const FETCH_ENTITY
浏览 52提问于2017-06-23得票数 8
回答已采纳
1回答
仅指类型，但在此处用作值。
、、、、
我在编写这个时使用TypeScript。尝试创建一个将字符串作为param并更新状态的简单操作。但我知道这个错误我不明白。
src/containers/DamageClaimReceipt.tsx
import * as React from "react"
import { Text, View } from "react-native"
import { Question } from "../components/Question"
import GjeButton from "../components/GjeButton
浏览 0提问于2018-02-27得票数 1
回答已采纳
我正在进入typescript，我似乎不知道如何正确地键入我的无状态组件，这些组件都有一个redux HOC，为它们注入一些道具和函数。
这是我的wrapper.tsx
export type Props = ReturnType<typeof mapStateToProps> &
ReturnType<typeof mapDispatchToProps> & {
fetchMorePosts: () => void;
};
const withPostFeedWrapper = <WrapperProps extends
浏览 11提问于2020-06-03得票数 1
回答已采纳
这一定是我处理过的最烦人的事情了。
我到底如何在react / redux / typescript中为调度设置类型？下面是代码片段：
class MyComponent extends Component<StateFromProps> { // Do I need a <..., DispatchFromProps> here?
...
const mapStateToProps = (state: StateFromProps) => {
return {
counter: state.counter
}
}
c
浏览 0提问于2020-03-16得票数 0
1回答
我要测试连接的反应元件。我正在使用Jest，React测试库和redux-模拟商店。当我试图获得一些元素时，我会得到一个错误：
TestingLibraryElementError:无法找到文本: Test的元素。这可能是因为文本被多个元素分解。在这种情况下，您可以为文本匹配器提供一个函数，以使匹配器更加灵活。
package.json
"redux-mock-store": "^1.5.4",
"typescript": "^3.9.7",
"@testing-library/jest-dom": "^5
浏览 4提问于2020-10-08得票数 1
回答已采纳
1回答
员额构成部分：
import React from 'react';
import './post.styles.scss';
import { connect } from 'react-redux';
import { requestContents } from '../../redux/post/post.actions';
class Post extends React.Component {
componentWillMount(){
}
render(){
浏览 2提问于2019-08-07得票数 1
回答已采纳
致力于TypeScript中的react应用程序。
我试图理解使用as导出默认组件的正确语法
到目前为止，我用的是：
class HomePage extends Component<IProps, IState> {
...
}
export default HomePage
或在短期内：
export default class HomePage extends Component<IProps, IState> {
...
}
现在，在添加redux支持之后。我有这样的东西：
class HomePage extends Component<I
浏览 4提问于2020-01-13得票数 1
回答已采纳
我正试着在React + TypeScript中开始使用Redux，所以我遵循Redux的教程，并尝试在一个示例应用程序中实现它。
关于存储和mappStateToProps函数参数的类型，我遇到了很多困难。
我按照以下方式配置了存储区：
import { configureStore } from '@reduxjs/toolkit'
import linksReducer from '../features/links/linksSlice'
const store = configureStore({
reducer: {
links: l
浏览 4提问于2020-01-19得票数 3
回答已采纳
我试图在typescript中使用react-css- styleName，但是我得到了一个错误信息: can't add element.Here to a div element.Here is the code。
import * as Immutable from 'immutable';
import * as React from 'react';
import * as CSSModules from 'react-css-modules';
import { connect } from 'react-redux
浏览 0提问于2017-03-25得票数 2
Redux-thunk允许您创建返回函数而不是操作的操作创建器。内部函数接收存储方法dispatch和getState作为参数。
function incrementAsync() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
但与此同时，react-redux的connect已经有了一个mapDispatchToProps参数，可用于将操作创建器包装到调度调用中，以便可以直接调用它们。使用mapDispat
浏览 0提问于2017-06-12得票数 4
我有以下容器：
// @flow
import { connect } from 'react-redux';
import { authLogin } from '../../redux/actions/authentication';
import UserAuthenticator from './UserAuthenticator';
function mapStateToProps({ authentication }) {
return {
validSession: authentication.validSessi
浏览 5提问于2017-06-14得票数 1
1回答
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as CommonActions from 'common/actions/common.actions';
import Activity from './activity.component';
const mapStateToProps = ({ common }) => ({common});
const mapDispatchToPr
浏览 2提问于2019-07-09得票数 1
我无法在连接到Redux的类组件中使用static方法。TypeScript报告
Argument of type 'typeof SAI' is not assignable to parameter of type 'ComponentType<IStateProps & IDispatchProps>'.
Type 'typeof SAI' is not assignable to type 'StatelessComponent<IStateProps & IDispatchProps>
浏览 0提问于2018-07-05得票数 2
回答已采纳
3回答
我有一个异步的redux操作，所以我正在使用thunk中间件。
我对组件具有mapStateToProps、mapDispatchToProps和connect函数，如下所示：
const mapStateToProps = (store: IApplicationState) => {
return {
loading: store.products.loading,
products: store.products.products
};
};
const mapDispatchToProps = (dispatch: any) => {
retur
浏览 6提问于2018-10-24得票数 19
我刚接触React和Redux，以前我只用过Angular。我学习React的第一个问题是在我尝试使用Redux时出现的。我已经在index.tsx文件中定义了我的简单状态、操作、reducer和存储：
export interface AppState {
count: number;
}
const INCREMENT = 'INCREMENT';
export class IncrementAction implements Action {
type = INCREMENT;
}
function opsReducer(state: AppState
浏览 0提问于2017-11-11得票数 1
类扩展值#不是构造函数或空
当尝试继承与react redux“连接”->绑定的父类时，会出现错误。
Redux
const mapStateToProps=(state)=>({
.....
});
const mapDispatchToProps=(dispatch)=>{
return {
paymentOver:()=>dispatch(paymentClose()),
}
}
export {
mapStateToProps,mapDispatchToProps
}
父类
import { co
浏览 1提问于2021-02-12得票数 0
回答已采纳
1回答
我在typescript中像这样使用redux-thunk： //store
export const thunkCreateArticle = (articleCreateView: ArticleCreateView):
ThunkAction<void, ArticleState, BlogClient, Action<string>> => async (dispatch, _, api) => {
const article = await api.createArticle(articleCreateView);
浏览 10提问于2020-01-22得票数 1
回答已采纳
我只是在使用redux，在每次访问redux状态时，我都会问是否必须声明mapState和mapDispatch。
我已经用它的存储和动作/动作创建者/类型设置了redux。我还利用了react redux库中的连接自组织功能。我有两个组件，共享状态和操作。每当我想访问这些属性时，是否也必须传递mapDispatchToProps和mapStateToProps并连接函数？我知道有一些钩子可以做到这一点，但我要求没有钩子。我将提供下面的代码。谢谢!
// CarContainer
import React from "react";
import { connect } fr
浏览 2提问于2020-06-05得票数 0
回答已采纳
我读过关于bindActionCreators的文章，我在这里编译了一个resumen：
import { addTodo,deleteTodo } from './actionCreators'
import { bindActionCreators } from 'redux'
function mapStateToProps(state) {
return { todos: state.todos }
}
function mapDispatchToProps(dispatch) {
re
浏览 0提问于2018-03-14得票数 0
回答已采纳
我可以在v6. redux表单中配置和其他redux参数吗？
在redux-form ~> 中是这样的
reduxForm(配置:Object，mapStateToProps?，mapDispatchToProps?，mergeProps?，选项？)
创建一个装饰器，使用Redux窗体将窗体组件连接到Redux。它接受一个配置参数，然后可选地接受mapStateToProps、mapDispatchToProps、mergeProps和options参数，这些参数与react的connect()函数的参数完全对应，允许您将表单组件连接到Redux中的其他状态。
。
例如：
im
浏览 5提问于2016-07-05得票数 0
回答已采纳
3回答
我现在使用的是redux和类型记录。
定义组件的道具的最佳实践是什么?该组件通过@connect接收redux操作，但也从父级获得道具？示例：
// mychild.tsx
export namespace MyChildComponent {
export interface IProps {
propertyFromParent: string;
propertyFromRedux: string; // !!!! -> This is the problem
actionsPropertyFromRedux: typeof MyReduxAction
浏览 8提问于2017-04-19得票数 15
回答已采纳
我制作了一个非常简单的react+redux应用程序，但是只要执行任何操作，我就会在浏览器控制台中收到7条关于useMemo参数不匹配的警告。以下是第一项：
Warning: The final argument passed to useMemo changed size between renders. The order and size of this array must remain constant.
Previous: [[object Object]]
Incoming: [[object Object], function () {
// Distingu
浏览 3提问于2020-01-05得票数 1
回答已采纳
我有一个现有的mapDispatchToProps
const mapDispatchToProps = (dispatch) => ({
updateThickness: (text, number) => {
dispatch(updateDimension('thickness', text, number))
}
})
但是现在我需要在每次updateThickness时计算音量并分派结果。其实质是：
let litres = calcVol(getState())
dispatch(updateVolume(litres))
其中getSt
浏览 4提问于2017-03-27得票数 0
回答已采纳
我明白了这个错误
_react.default.memo不是一个函数
和wrapWithConnect。
这是一个react-native项目，在我使用connect函数将调度连接到我的react组件之前，它运行得很好：
包版本：
"react": "16.5.0",
"react-redux": "^6.0.1",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"re
浏览 2提问于2019-04-11得票数 27
我正在尝试了解React和Redux是如何工作的，我正在研究来自的FuelSavingsPage.js。我知道actions在mapDispatchToProps中是从哪里来的，但我不明白state是如何传递给mapStateToProps的，或者dispatch是如何传递给mapDispatchToProps的。这是怎么发生的？
import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 're
浏览 8提问于2016-08-20得票数 5
回答已采纳
3回答
我有来自不同包的动作，它们具有相同的名称，如下所示：
import { bindActionCreators } from 'redux';
import { setActiveLanguage } from 'react-localize-redux';
import * as actionCreators from '../actions/actionCreators';
import * as toggleActions from '../actions/toggleActions';
import {actions as
浏览 3提问于2017-12-05得票数 1
我正在尝试将一个react项目从javascript转换为TypeScript。项目是使用CRA --typescript创建的。我在其中使用了redux-saga。我没有编译错误，但我面临一个运行时错误。 我已经检查了this question和其他几个，我认为我没有违反上面提到的规则。 import { IEventDto } from "dtos/event";
import React, { Dispatch, memo, useEffect } from "react";
import { connect } from "react-redu
浏览 25提问于2019-12-06得票数 1
回答已采纳
这是我的LoginContainer.ts不确定为什么我在我的render方法中得到这些typescript错误：
import * as React from 'react';
import { connect } from 'react-redux';
// Actions
// import { addCoins } from 'actions/coins';
interface IProps {
loginActions: any
}
interface IState {
email: string;
pass
浏览 8提问于2018-09-14得票数 16
回答已采纳
我试着遵循Redux文档中关于表示/容器组件的规则，并使用react redux 连接我的容器。我使用mapDispatchToProps和将所需的操作注入到道具调用操作中。我从不使用第二个参数ownProps。
随着我的应用程序变得越来越复杂，我最终得到了许多几乎相同的mapDispatchToProps() (每个容器一个)；它们绑定来自几乎所有动作创建者的所有操作。
所以我想知道:只有一个mapDispatchToProps函数来绑定所有的操作并在每个容器中使用它会有什么缺点呢？
就像这样：
import { bindActionCreators } from 'redux
浏览 1提问于2016-03-02得票数 3
回答已采纳
我也想在我的新项目中使用nextjs与redux和thunk。我想知道如何正确地实现所有包。
在我以前的项目页面中，HOC组件如下：
import {connect} from 'react-redux';
import Page from './about';
import {fetchUsers} from '../../actions/user';
const mapStateToProps = (state) => {
const {users} = state;
return users;
};
const m
浏览 1提问于2018-07-25得票数 12
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
