React + Redux：论如何将 JS 项目改为 TS 项目

港控/mmm° 2022-10-19 08:19 307阅读 0赞

以计数器为例

使用命令搭好项目之后，安装 redux，react-redux 即可。

index.js 页面中创建 store

import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    import {  Provider } from 'react-redux'
    import {  createStore } from 'redux'
    import {  reducer } from './reducer'
    
    const store = createStore(reducer)
    
    ReactDOM.render(
      <Provider store={ store}>
        <App />
      </Provider>,
      document.getElementById('root')
    );

reducer.jsx

import {  INCREMENT, DECREMENT } from '../constants'
    
    export const reducer = (state = 0, action) => { 
      switch (action.type) { 
        case INCREMENT:
          return state + 1
        case DECREMENT:
          return state - 1
        default:
          return state
      }
    }

constants.jsx

export const INCREMENT = 'INCREMENT'
    export const DECREMENT = 'DECREMENT'

创建 action.jsx

import {  DECREMENT, INCREMENT } from '../constants'
    
    export const increment = () => ({ 
      type: INCREMENT
    })
    
    export const decrement = () => ({ 
      type: DECREMENT
    })

无状态组件 Counter.jsx

import React from 'react'
    
    export default class Counter extends React.PureComponent { 
      render() { 
        const {  value, onIncrement, onDecrement } = this.props;
        return (
          <p>
            Clicked: { value} times
            <br />
            <button onClick={ onIncrement} style={ {  marginRight: 20 }}> +  </button>
            <button onClick={ onDecrement}> - </button>
          </p>
        )
      }
    }

容器组件 CountCon.jsx

import {  connect } from 'react-redux';
    import Counter from '../components/Counter';
    import {  decrement, increment } from '../actions'
    
    const mapStateToProps = (state) => ({ 
      value: state
    })
    
    const mapDispatchToProps = (dispatch) => ({ 
      onDecrement: () => dispatch(decrement()),
      onIncrement: () => dispatch(increment())
    })
    
    export default connect(mapStateToProps, mapDispatchToProps)(Counter);

现在我们的页面可以正常运行了。

![在这里插入图片描述][2021071012470365.gif_pic_center]

为什么会出现 TypeScript？

TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。

对应于项目来说，有数据输出输入的地方，就可以使用 TypeScript。

以上面写好的计时器来说

> 备注：对于项目如何支持 TypeScript，请各位自行百度

reducer 就是一个典型存在输入输出。

export const reducer = (state = 0, action) => { 
      switch (action.type) { 
        case INCREMENT:
          return state + 1
        case DECREMENT:
          return state - 1
        default:
          return state
      }
    }

action

export type ModifyAction = IINCREMENTAction | IDECREMENTAction;

export interface IINCREMENTAction { 
      type: INCREMENT;
    }
    
    export interface IDECREMENTAction { 
      type: DECREMENT;
    }

reducer 返回的是数字，我们也应当显示的声明

export default (state = 0, action: ModifyAction): number => { }

对于无状态组件，接收来自外界的值，也应当使用接口进行显示声明

// 创建类型接口
    export interface IProps { 
      value: number;
      onIncrement: () => void;
      onDecrement: () => void;
    }
    
    export default class Counter extends React.PureComponent<IProps> { }

容器组件中的 `mapStateToProps` 与 `mapDispatchToProps` 也是典型的输入输出。

// 将 reducer 中的状态插入到组件的 props 中
    const mapStateToProps = (state: number): {  value: number } => ({ 
      value: state
    })
    
    // 将 对应action 插入到组件的 props 中
    const mapDispatchToProps = (dispatch: Dispatch) => ({ 
      onDecrement: () => dispatch(decrement()),
      onIncrement: () => dispatch(increment())
    })

[2021071012470365.gif_pic_center]: /images/20221005/04ee078dc56540e889a7c57fe222869a.png