react redux Typescript 的使用

用create-react-app新建一个react项目

create-react-app xxx --typescript
安装redux
yarn add redux @types/redux react-redux @types/react-redux;
npm install redux @types/redux react-redux @types/react-redux;
创建store
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import { systemReducer } from './system/reducers';
import { chatReducer } from './chat/reducers';
const rootReducer = combineReducers({
  system: systemReducer,
  chat: chatReducer
export type AppState = ReturnType<typeof rootReducer>;
export default function configureStore() {
  const middlewares = [thunkMiddleware];
  // applyMiddleware引入中间件
  const middleWareEnhancer = applyMiddleware(...middlewares);
  const store = createStore(
    rootReducer,
    composeWithDevTools(middleWareEnhancer)
  return store;
引用store
import * as React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store';
import App from './App';
const store = configureStore();
const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
render(<Root />, document.getElementById('root'));
typescript的写法就是在class前加上props 和 state的类型，比如：
import React from 'react';
interface IProps{}
interface IState{
  xx: string;
  yy: number
class MyComponent extends React.Component<Props, State> {
  constructor(props: IProps) {
    super(props);
    this.state={
      xx: '',
      yy: 1
  render(){
    return (
一个简单的聊天应用程序来演示包含静态类型的可能方法。这个聊天应用程序将有两个 reducer。chat reducer 将专注于存储聊天记录，system reducer 将专注于存储会话信息。
为 State 增加类型检查
向每个 state 切片添加类型是一个很好的开始，因为它不依赖于其他类型。在这个例子中，我们首先描述 chat reducer 相关的 state 切片：
// src/store/chat/types.ts
export interface Message {
  user: string
  message: string
  timestamp: number
export interface ChatState {
  messages: Message[]
然后对 system reducer 相关的 state 切片做同样的处理：
// src/store/system/types.ts
export interface SystemState {
  loggedIn: boolean
  session: string
  userName: string
导出的这些 interface，稍后在 reducer 和 action creators 中都能重用它们。
为 Action & Action Creator 增加类型检查
chat Action 常量和形状：
// src/store/chat/types.ts
export const SEND_MESSAGE = 'SEND_MESSAGE'
export const DELETE_MESSAGE = 'DELETE_MESSAGE'
interface SendMessageAction {
  type: typeof SEND_MESSAGE
  payload: Message
interface DeleteMessageAction {
  type: typeof DELETE_MESSAGE
  meta: {
    timestamp: number
export type ChatActionTypes = SendMessageAction | DeleteMessageAction
此处使用 TypeScript 的联合类型来表达所有可能的操作。
声明这些类型后，我们现在还可以对 chat 的 action creator 做类型检查。在这种情况下，我们利用 TypeScript 的 inference：
// src/store/chat/actions.ts
import { Message, SEND_MESSAGE, DELETE_MESSAGE } from './types'
// TypeScript infers that this function is returning SendMessageAction
export function sendMessage(newMessage: Message) {
  return {
    type: SEND_MESSAGE,
    payload: newMessage
// TypeScript infers that this function is returning DeleteMessageAction
export function deleteMessage(timestamp: number) {
  return {
    type: DELETE_MESSAGE,
    meta: {
      timestamp
system action 常量和形状：
// src/store/system/types.ts
export const UPDATE_SESSION = 'UPDATE_SESSION'
interface UpdateSessionAction {
  type: typeof UPDATE_SESSION
  payload: SystemState
export type SystemActionTypes = UpdateSessionAction
有了这些类型，现在也可以对 system 的 action creator 做类型检查：
// src/store/system/actions.ts
import { SystemState, UPDATE_SESSION } from './types'
export function updateSession(newSession: SystemState) {
  return {
    type: UPDATE_SESSION,
    payload: newSession
为 reducer 增加类型检查
reducer 只是纯函数，它输入 先前的 state 和一个 action 然后返回下一个 state。在此示例中，我们显式声明此 reducer 将接收的 action 类型以及它应返回的内容（适当的 state 切片）。 通过这些添加，TypeScript 将在我们的 action 和 state 的属性上提供丰富的智能感知。
// src/store/chat/reducers.ts
import {
  ChatState,
  ChatActions,
  ChatActionTypes,
  SEND_MESSAGE,
  DELETE_MESSAGE
} from './types'
const initialState: ChatState = {
  messages: []
export function chatReducer(
  state = initialState,
  action: ChatActionTypes
): ChatState {
  switch (action.type) {
    case SEND_MESSAGE:
      return {
        messages: [...state.messages, action.payload]
    case DELETE_MESSAGE:
      return {
        messages: state.messages.filter(
          message => message.timestamp !== action.meta.timestamp
    default:
      return state
已增加类型检查的 system reducer：
// src/store/system/reducers.ts
import {
  SystemActions,
  SystemState,
  SystemActionTypes,
  UPDATE_SESSION
} from './types'
const initialState: SystemState = {
  loggedIn: false,
  session: '',
  userName: ''
export function systemReducer(
  state = initialState,
  action: SystemActionTypes
): SystemState {
  switch (action.type) {
    case UPDATE_SESSION: {
      return {
        ...state,
        ...action.payload
    default:
      return state
生成 root reducer 函数，通常使用 combineReducers 来完成。请注意，我们不必为 AppState 显式声明新接口。 我们可以使用 ReturnType 从 rootReducer 推断状态形状。
// src/store/index.ts
import { systemReducer } from './system/reducers'
import { chatReducer } from './chat/reducers'
const rootReducer = combineReducers({
  system: systemReducer,
  chat: chatReducer
export type AppState = ReturnType<typeof rootReducer>
对 mapStateToProps 接收的参数添加类型检查，将 action creator 映射到组件的 props 中
// src/App.tsx
import React, {Component} from 'react'
import {connect} from 'react-redux'
import { AppState } from './store'
import { SystemState } from './store/system/types'
import { updateSession } from './store/system/actions'
import { ChatState } from './store/chat/types'
import { sendMessage } from './store/chat/actions'
interface AppProps {
  chat: ChatState
  system: SystemState
  sendMessage: typeof sendMessage
  updateSession: typeof updateSession
class App extends Component<AppProps>{
const mapStateToProps = (state: AppState) => (
  // 此处的类型将在AppProps处校验
    system: state.system,
    chat: state.chat