React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過(guò)程

更新時(shí)間：2023年09月21日 11:25:52 作者：深圳市有德者科技有限公司-耿瑞

這篇文章主要介紹了React+Typescript項(xiàng)目環(huán)境搭建并使用redux環(huán)境的詳細(xì)過(guò)程,本文通過(guò)圖文實(shí)例相結(jié)合給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

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
    }
}

然后我們?cè)僭趕rc目錄下創(chuàng)建 reducer 文件夾
下面還是一個(gè)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;
  }
}

這就相當(dāng)于是我們之前全局處理接受/返回的一個(gè)地方
我們分別寫(xiě)了兩個(gè)事件對(duì)應(yīng) 將 enthusiasmLevel 加一和減一
事件名就對(duì)應(yīng)我們上面定義的兩個(gè)變量值 DECREMENT_ENTHUSIASM與INCREMENT_ENTHUSIASM

然后我們?cè)僭趕rc目錄下創(chuàng)建一個(gè)文件夾 store

然后下面再創(chuàng)建一個(gè) 文件叫 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;

這個(gè) initialState 就是我們的數(shù)據(jù)來(lái)源了里面有兩個(gè)值分別是 enthusiasmLevel和languageName
接下來(lái) 我們重點(diǎn)就是關(guān)聯(lián)了

我們打開(kāi) src下的 index.tsx
引入

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

然后在標(biāo)簽上用上 Provider store 屬性就用我們寫(xiě)的 store

在這里插入圖片描述

然后這里我也有點(diǎn)懶直接就給代碼寫(xiě)到 App.tsx里吧

App.tsx編寫(xiě)代碼如下

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);

這樣我們運(yùn)行起項(xiàng)目會(huì)看到 name 和 enthusiasmLevel 的展示是正常的

在這里插入圖片描述

然后我們操作 decrementEnthusiasm 和 incrementEnthusiasm 加減事件我們會(huì)發(fā)現(xiàn)

雖然能夠正常執(zhí)行但實(shí)際上，也是非常的好用啊

在這里插入圖片描述

到此這篇關(guān)于React+Typescript項(xiàng)目環(huán)境中搭建并使用redux環(huán)境的文章就介紹到這了,更多相關(guān)React+Typescript項(xiàng)目搭建使用redux環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: