技術標籤：reacttypescriptreacttypescript

1.專案目錄

2.新建index.ts檔案，初始化一個增強store倉庫

import { createStore, applyMiddleware, StoreEnhancer, StoreEnhancerStoreCreator, Store } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers/index';

// 生成store增強器 
const storeEnhancer: StoreEnhancer =
 
 applyMiddleware(thunk);
const storeEnhancerStoreCreator: StoreEnhancerStoreCreator = storeEnhancer(createStore);

const store: Store = storeEnhancerStoreCreator(reducer);

export default store;

3.新建action_types.ts檔案

export const ADD = 'ADD';
export const DELETE = 'DELETE';

4.新建addReducer.ts，配置reducer，reducer模組化

import * as types from '../action_types';
import { AnyAction } from 'redux';

// 定義引數介面
export interface AddState {
  number: number
}

// 初始化state
let initialState: AddState = {
  number: 1
};

// 返回一個reducer
export default (state: AddState = initialState, action: AnyAction) => {
  switch (action.type)
 
 {
    case types.ADD:
    // payload為傳入的引數
      return { number: state.number + action.payload };
    default:
      return state;
  }
};

5.新建index.ts檔案，合併reducer

import { combineReducers, ReducersMapObject, AnyAction, Reducer } from 'redux';
import addReducer, { AddState } from './addReducer';
import deleteReducer, { DeleteState } from './deleteReducer';

// 合併reducers，模組化
export interface CombinedState {
  addReducer: AddState,
  ...
  ...
  ...
}
const reducers: ReducersMapObject<CombinedState, AnyAction> = {
  addReducer,
  deleteReducer
};
const reducer: Reducer<CombinedState, AnyAction> = combineReducers(reducers);

export default reducer;

6.掛載到App上

import React, { Component } from 'react';
import Home from './pages/home';
import { Provider } from 'react-redux';
import store from './store';


export default class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Home />
      </Provider>
    );
  }
}

7.使用

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { AddState } from 'src/store/reducers/addReducer';
import { CombinedState } from 'src/store/reducers';
import * as types from 'src/store/action_types';

class Home extends Component<Props> {
  render() {
    const { number, add } = this.props;
    return (
      <div>
        <p>{number}</p>
        <button onClick={() => add(5)}>增加</button>
      </div>
    );
  }
}
// map函式，類似vue的map函式，只不過這裡要自己寫
const mapStateToProps = (state: CombinedState): AddState => state.addReducer;
const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    add(num: number = 1) {
      // payload為引數
      dispatch({ type: types.ADD, payload: num });
    }
  };
};

type Props = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);