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

前几篇文章我们的项目已经开始功能渐渐完善了那么我们来说最后一个点 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 的展示是正常的

在这里插入图片描述