React+Typescript项目环境中搭建并使用redux环境

前几篇文章我们的项目已经开始功能渐渐完善了

那么我们来说最后一个点 redux

这个并不需要我们多努力其实官方文档给到已经算是很全面了

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

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

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

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

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

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

我们在项目src目录下创建一个文件夹叫 types

下面创建一个 index.tsx

参考代码如下

typescript 复制代码

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

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

我们在项目src目录创建一个文件夹叫 constants

下面创建一个 index.tsx文件

参考代码如下

typescript 复制代码

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 的文件

参考代码如下

typescript 复制代码

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

参考代码如下

typescript 复制代码

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

typescript 复制代码

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

引入

typescript 复制代码

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

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

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

App.tsx编写代码如下

typescript 复制代码

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 加减事件我们会发现

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