脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Typescript项目搭建

React+Typescript项目环境搭建并使用redux环境的详细过程

 更新时间：2023年09月21日 11:25:52   作者：深圳市有德者科技有限公司-耿瑞  
这篇文章主要介绍了React+Typescript项目环境搭建并使用redux环境的详细过程,本文通过图文实例相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

前几篇文章 我们的项目已经开始功能渐渐完善了
那么 我们来说最后一个点 redux这个并不需要我们多努力 其实官方文档给到已经算是很全面了

我们可以直接访问地址 TypeScript 中文手册中文手册和官方是一样的 而且对我们非常友好

我们会在左侧导航栏中找到一个 React 点进去

在这里插入图片描述

进入之后 一直往下翻 我们就可以看到 Redux 部分

在这里插入图片描述

我们直接 用他这个命令去项目终端安装就好了 下面也讲述了为什么不需要单独再去导入Redux了

在这里插入图片描述

我们这里在项目终端去引入

在这里插入图片描述

这里需要注意一下版本哦 反正 我发现 react开发 除了文档不是特别健全之外 每个版本改动都还是不小的 经常出现 一个版本提升 就写法完全不一样了的事

在这里插入图片描述

我们在项目src目录下创建一个文件夹 叫 types下面创建一个 index.tsx参考代码如下

export interface IStoreState {
    languageName: string;
    enthusiasmLevel: number;
}

就是简单导出了一个接口 接口限制要有两个字段 languageName 字符串类型 enthusiasmlevel 数字类型

我们在项目src目录创建一个文件夹 叫 constants
下面创建一个 index.tsx文件
参考代码如下

export const INCREMENT_ENTHUSIASM = 'INCREMENT_ENTHUSIASM';
export type INCREMENT_ENTHUSIASM = typeof INCREMENT_ENTHUSIASM;
export const DECREMENT_ENTHUSIASM = 'DECREMENT_ENTHUSIASM';
export type DECREMENT_ENTHUSIASM = typeof DECREMENT_ENTHUSIASM;

这里声明了两个常量 至于type的写法 大家可以去看一下 ts命名空间的内容
我们简单说 通过type 声明一个自己的字符串字面量类型

然后 我们再在项目src目录创建一个目录 叫 actions
目录下依旧创建一个 叫 index.tsx 的文件
参考代码如下

import * as constants from '../constants'
export interface IIncrementEnthusiasm {
    type: constants.INCREMENT_ENTHUSIASM;
}
export interface IDecrementEnthusiasm {
    type: constants.DECREMENT_ENTHUSIASM;
}
export type EnthusiasmAction = IIncrementEnthusiasm | IDecrementEnthusiasm;
export function incrementEnthusiasm(): IIncrementEnthusiasm {
    return {
        type: constants.INCREMENT_ENTHUSIASM
    }
}
export function decrementEnthusiasm(): IDecrementEnthusiasm {
    return {
        type: constants.DECREMENT_ENTHUSIASM
    }
}

然后 我们再在src目录下创建 reducer 文件夹
下面还是一个index.tsx
参考代码如下

import { EnthusiasmAction } from '../actions';
import { IStoreState } from '../types/index';
import { INCREMENT_ENTHUSIASM, DECREMENT_ENTHUSIASM } from '../constants/index';
export function enthusiasm(state: IStoreState, action: EnthusiasmAction): IStoreState {
  switch (action.type) {
    case INCREMENT_ENTHUSIASM:
      return { ...state, enthusiasmLevel: state.enthusiasmLevel + 1 };
    case DECREMENT_ENTHUSIASM:
      return { ...state, enthusiasmLevel: Math.max(1, state.enthusiasmLevel - 1) };
    default:
      return state;
  }
}

这就相当于是我们之前 全局处理 接受/返回 的一个地方
我们分别写了两个事件 对应 将 enthusiasmLevel 加一 和 减一
事件名就对应我们上面定义的两个变量值 DECREMENT_ENTHUSIASM与INCREMENT_ENTHUSIASM

然后 我们再在src目录下创建一个文件夹 store

然后下面再创建一个 文件 叫 index.tsx

import { createStore, Reducer } from 'redux';
import { enthusiasm } from '../reducer/index';
import { EnthusiasmAction } from '../actions/index';
import { IStoreState } from '../types/index';
const initialState: IStoreState = {
  enthusiasmLevel: 1,
  languageName: 'TypeScript'
};
const store = createStore<IStoreState, EnthusiasmAction, {}, {}>(enthusiasm as Reducer<IStoreState, EnthusiasmAction>, initialState);
export default store;

这个 initialState 就是我们的数据来源了 里面有两个值 分别是 enthusiasmLevel和languageName
接下来 我们重点就是关联了

我们打开 src下的 index.tsx
引入

import { Provider } from "react-redux";
import store from "./store";

然后 在标签上 用上 Provider store 属性 就用我们写的 store

在这里插入图片描述

然后 这里 我也有点懒 直接就给代码写到 App.tsx里吧

App.tsx编写代码如下

import * as React from "react";
import * as actions from './actions/index';
import { IStoreState } from './types/index';
import { connect } from 'react-redux';
export interface IProps {
  name: string;
  enthusiasmLevel?: number;
  onIncrement?: () => void;
  onDecrement?: () => void;
}
class App extends React.Component<IProps,any> {
  public render() {
    const { name,enthusiasmLevel,onIncrement,onDecrement } = this.props;
    return (
      <div className="App">
        <p>{ name }</p>
        <p>{ enthusiasmLevel }</p>
        <button onClick={ onIncrement }>+</button>
        <button onClick={ onDecrement }>-</button>
      </div>
    );
  }
}
export function mapStateToProps({ enthusiasmLevel, languageName }: IStoreState) {
  return {
    enthusiasmLevel,
    name: languageName,
  }
}
export function mapDispatchToProps(dispatch: any) {
  return {
    onDecrement: () => dispatch(actions.decrementEnthusiasm()),
    onIncrement: () => dispatch(actions.incrementEnthusiasm())
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(App);

这样 我们运行起项目 会看到 name 和 enthusiasmLevel 的展示是正常的

在这里插入图片描述

然后 我们操作 decrementEnthusiasm 和 incrementEnthusiasm 加减事件 我们会发现

虽然能够正常执行 但实际上 ， 也是非常的好用啊

在这里插入图片描述

到此这篇关于React+Typescript项目环境中搭建并使用redux环境的文章就介绍到这了,更多相关React+Typescript项目搭建使用redux环境内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • react antd实现动态增减表单

    react antd实现动态增减表单

    antd是react流行的ui框架库，本文主要介绍了react antd实现动态增减表单，分享给大家，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • create-react-app常用自定义配置教程示例

    create-react-app常用自定义配置教程示例

    这篇文章主要为大家介绍了create-react-app常用自定义配置教程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-06-06
  • React Native第三方平台分享的实例（Android，IOS双平台）

    React Native第三方平台分享的实例（Android，IOS双平台）

    本篇文章主要介绍了React Native第三方平台分享的实例（Android，IOS双平台），具有一定的参考价值，有兴趣的可以了解一下
    2017-08-08
  • react-native DatePicker日期选择组件的实现代码

    react-native DatePicker日期选择组件的实现代码

    本篇文章主要介绍了react-native DatePicker日期选择组件的实现代码，具有一定的参考价值，有兴趣的可以了解下
    2017-09-09
  • 如何应用 SOLID 原则在 React 中整理代码之开闭原则

    如何应用 SOLID 原则在 React 中整理代码之开闭原则

    React 不是面向对象，但这些原则背后的主要思想可能是有帮助的，在本文中，我将尝试演示如何应用这些原则来编写更好的代码，对React SOLID原则开闭原则相关知识感兴趣的朋友一起看看吧
    2022-07-07
  • React 组件权限控制的实现

    React 组件权限控制的实现

    本文主要介绍了React 组件权限控制的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-02-02
  • React 中 setState使用小结

    React 中 setState使用小结

    这篇文章主要介绍了React 中 setState使用小结,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-10-10
  • react实现消息显示器

    react实现消息显示器

    这篇文章主要为大家详细介绍了react实现消息显示器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08
  • React Suspense解决竞态条件详解

    React Suspense解决竞态条件详解

    这篇文章主要为大家介绍了React Suspense解决竞态条件详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • react中使用echarts,并实现tooltip循环轮播方式

    react中使用echarts,并实现tooltip循环轮播方式

    这篇文章主要介绍了react中使用echarts,并实现tooltip循环轮播方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01

最新评论