Typescript 搭配 react-reudx 数据操作

使用 Typescript 搭配 react-reudx 进行数据操作，基本上按照 react-reudx 的操作进行
App.tsx 文件内容

import * as React from 'react'
import {Provider} from 'react-redux'
import {store} from './store'
import Todo from './Todo'

class App extends React.Component {
    render() {
        return(
            <Provider store={store}>
                <Todo />
            </Provider>
        )
    }
}

export default App 

使用 <Provider> 包裹组件（甚至可以在index.tsx 中直接包裹 App组件）

import React from 'react'
import { connect } from 'react-redux'
import { inputChange, addValueAction } from './store/action'

const stateToProps = (state: any) => {
    return ({
        // inputValue: state.inputValue
        state
    })
}

const dispatchToProps = (dispatch: any) => {
    return ({
        inputChangeValue: (e: any) => {
            // 将 action 分离出去
            const action = inputChange(e.target.value)
            dispatch(action)
        },
        onEnter: (e: any) => {
            // console.log(e.keyCode);
            if (e.keyCode === 13) {
                const action = addValueAction()
                dispatch(action)
            }
        }
    })
}

// Typescript 类型别名——映射类型
type connectProps = ReturnType<typeof stateToProps> & ReturnType<typeof dispatchToProps>

// 将映射类型规则加入组件，才能使用 stateToProps 、dispatchToProps，否则报错
class Todo extends React.Component<connectProps> {
    render() {
        return (
            <div>
                <input 
                type="text" 
                value={this.props.state.inputValue} 
                onChange={this.props.inputChangeValue} 
                onKeyUp={this.props.onEnter} 
                />
                <div>
                    {this.props.state.list ? 
                    this.props.state.list.map((item:any,index:number)=> <div key={index}>{item.things}</div> )
                    : ''}
                </div>
            </div>
        )
    }
}

export default connect(stateToProps, dispatchToProps)(Todo)

在组件中从 'react-redux' 引入 connect ，并将 state、dispatch 放入到 props 中

注意： 这里使用状态组件（即class类组件），需要写一个映射类型，给class类组件，否则报错

另外，如果组件内部除了 render() 函数，没有其他函数方法，可视为 UI 组件，可以将其用无状态组件替换，并可省略上述的映射

const Todo = (props: any) => {
    return (
        <div>
            <input
                type="text"
                value={props.state.inputValue}
                onChange={props.inputChangeValue}
                onKeyUp={props.onEnter}
            />
            <div>
                {props.state.list ?
                    props.state.list.map((item: any, index: number) => <div key={index}>{item.things}</div>)
                    : ''}
            </div>
        </div>
    )
}

只将 Todo组件 从有状态组件改为无状态组件，其他不变

完整项目链接：https://github.com/Shay-Cormac/react-redux-study