react dispatch_React+Typescript+redux/react-redux基础使用（单个reducer）

React-Typescript中redux/react-redux使用（单个reducer）

一般在项目中需要使用redux/react-redux（当然也可以使用mobx），那么使用typescript写react应该怎样开发呢？

先推荐一个网站供大家学习：

下面链接这个项目中有一些问题，需要做处理，具体可以看下面的链接

react-typescript的redux使用​www.cntofu.com

首先初始化一个react-ts的项目让我们能有环境可以使用

create-react-app react-ts --template typescript

如果你已经有一个项目的话就可以安装redux的依赖了

yarn add redux react-redux @types/react-redux
或者
npm install -S redux react-redux @types/react-redux

以上就是安装部分，下面就是使用redux和react-redux部分：

react-ts使用redux都需要点什么？

1. 一个组件
2. 在组件中需要派发一个action，action将需要操作的值传给store，store中不作处理而是在reducer中处理
3. reducer是一个纯函数，处理完成之后将处理之后的值返回给store，组件会知道store发生变化然后通知组件更新

以上就是基本的流程，下来就看看使用情况，来看一下文件设置

store的目录设置

1. 创建一个常量文件 const.txs

// 定义state增加的
export const ADD = 'ADD'
export type ADD_TYPE = typeof ADD

// 定义state减少
export const LESSEN = 'LESSEN'
export type LESSEN_TYPE = typeof LESSEN

2. 设置actions目录，用来定义action，但是具体的写法和js写法有点差别

import {ADD, ADD_TYPE, LESSEN, LESSEN_TYPE} from './const'

export interface ADDAction {
    type: ADD_TYPE
}
export interface LESSENAction {
    type: LESSEN_TYPE
}

export type ModifyAction = ADDAction | LESSENAction

// 增加state次数的方法
export const add = ():ADDAction => ({
    type: ADD
})
export const lessen = ():LESSENAction => ({
    type: LESSEN
})

3. 设置reducer

import { ModifyAction } from './actions'
import { ADD, LESSEN } from './const'

// 对action进行限制，必须是在ModifyAction定义的
export default (state = 0, action:ModifyAction):number => {
    switch (action.type) {
        case ADD:
            return state + 1
        case LESSEN:
            return state - 1
        default:
            return state
    }
}

4. 设置store，之后会有多个reducer集中在这个里边处理

import { createStore } from 'redux'
import reducer from './reducers'


const store = createStore(reducer)

export default store

查看index.tsx组件中的操作

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Dispatch } from 'redux'

import { add, lessen } from '../store/actions'

interface IProps {
    value?: number,
    onadd: () => void
    onlesen: () => void
}

class Hello extends Component<IProps> {
    public render () {
        const { value, onadd, onlesen } = this.props
        return (<div>
            <h2>Hello 组件 --- {value}</h2>
            <button onClick={onadd}>++</button>
            <button onClick={onlesen}>--</button>
        </div>)
    }
}

const mapStateToProps = (state: number): {value: number} => ({
    value: state
})

const mapDispatchToProps = (dispatch: Dispatch) => ({
    onadd: () => dispatch(add()),
    onlesen: () => dispatch(lessen())
})



export default connect(mapStateToProps, mapDispatchToProps)(Hello)

在index.tsx中的操作

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux'
import store from './store/index'


ReactDOM.render(
    <Provider store={store}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </Provider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

以上就是react中使用typescript开发使用redux操作
在使用typescript开发react过、过程中前期有点繁琐，因为不断的定义interface Iprops和state， 但是后来想了一下这对于团队开发是比较重要的，因为可以统一代码风格，这样对以后的迭代是比较好的 还有一点这个如果是小项目开发其实根本发挥不出来效果，还比较繁琐

focusdroid：React + Typescript + react-redux多个reducer使用​zhuanlan.zhihu.com