2018年的六一儿童节已到，特此一篇来献给小盆友们。此处应该有掌声....
写在前面: 首先，什么是TypeScript？
官方原话:TypeScript is a typed superset of JavaScript that complies to plain JavaScript. Any host. Any OS. Open source. TypeScript是JavaScript类型的超集(强类型版本)，它可以编译成纯的JavaScript，它可以再任何浏览器，任何计算机和任何操作系统上运行，并且开源。
嗯，是的，你可以理解为TypeScript硬是把JavaScript(弱类型语言)"掰弯"了，变成强类型语言；强类语言的优势在于静态类型的检查，TypeScript虽然是强类型的语言，但是如果对象被声明为any类型，就会忽略所有的类型检查。这种灵活的结构保证了它整体有强类语言检查优势的同时，在一些细节问题上保持了弱类型的灵活。
1.为了能够快速搭建应用，我们将使用create-react-app官方脚手架为基础进行扩展。
创建一个项目(TypeScript版本)
npx create-react-app 项目名称 --scripts-version=react-scripts-ts
2.安装所需依赖包
yarn add history @types/history react-router-dom @types/react-router-dom react-router-redux @types/react-router-redux redux-actions @types/redux-actions redux-thunk @types/redux-thunk redux --D
*注意:
(1).redux 已经包含TypeScript包
(2).redux-thunk:2.20目前会报语法错误，解决方法:
修改node_modules/redux-thunk/index.d.ts
import { Middleware, Dispatch, Action, AnyAction } from 'redux';
export type ThunkAction<R, S, A extends Action = AnyAction, E = {}> = {
(dispatch: Dispatch<A, S>, getState: () => S, extraArgument: E): R
}
declare module 'redux' {
export interface Dispatch<A extends Action = AnyAction, S = {}> {
<R, E>(thunk: ThunkAction<R, S, A, E>): R
}
}
declare const thunk: Middleware & {
withExtraArgument(extraArgument: any): Middleware;
};
export default thunk;
3.开始编码
(1) 新建一个models.ts
// store中初始状态的接口声明
export interface ITodoModel {
id?: number;
text: string;
completed: boolean;
}
(2) 新建一个types.ts
// action 的唯一标识符
export const ADD_TODO = 'ADD_TODO';
(3) 新建一个anctions.ts
/**
*** 因为store中状态是只读的(可以使用store.getState()来获取整个store的状态)
*** 要改变它里面的状态只能分发一个action去改变其属性
**/
// createAction 让你可以轻松创建一个action
import {createAction} from 'redux-actions';
import {ITodoModel} from './models';
import {ADD_TODO} from './types';
const addTodo = createAction<ITodoModel, string>(
ADD_TODO,
(text: string) => ({text, completed: false})
);
export {
addTodo
}
(4) 新建一个reducers.ts
import {handleActions} from 'redux-actions';
import {ADD_TODO} from './types';
import {ITodoModel} from './models'
// 初始的状态,就像react中组件内的初始状态，只不过这个是全局的。
const initialState: ITodoModel = {
completed: true,
id: 1,
text: 'Use Redux',
};
export const todoReducer = handleActions<ITodoModel>({
[ADD_TODO]: (state: any, action: any) => {
console.log('reducer->state:', state);
console.log('reducer->action:', action);
return {completed: true, text: action.payload.text, id: 2};
},
}, initialState);
(5) 开始组建store
1. store->initState.ts
import {ITodoModel} from '../containers/home/modules/models';
export interface IRootState {
todo: ITodoModel;
}
2. store->reducer.ts
import {combineReducers} from 'redux';
import {todoReducer} from '../containers/home/modules/reducers';
// 把前面的reducers combine 起来
const rootReducer = combineReducers({
todo: todoReducer as any
});
export default rootReducer;
3. store->reducer.ts
import {Store, createStore, applyMiddleware} from 'redux';
import {routerMiddleware} from 'react-router-redux';
import thunkMiddleware from 'redux-thunk';
import rootReducer from './reducer';
import {IRootState} from './initState';
import {History} from 'history';
export function configureStore(history: History, initialState?: IRootState): Store<IRootState> {
// store 中间件，根据个人需求添加
const middleware = applyMiddleware(
thunkMiddleware,
routerMiddleware(history));
return createStore(
rootReducer as any,
initialState as any,
middleware
) as Store<IRootState>;
}
(6) 修改入口文件index.tsx
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import registerServiceWorker from './registerServiceWorker';
import Routers from './containers/Routers';
import createHistory from 'history/createBrowserHistory'
import {configureStore} from './store';
const history = createHistory();
const store = configureStore(history);
ReactDOM.render(
<Provider store={store}>
<Routers/>
</Provider>
,
document.getElementById('root') as HTMLElement
);
registerServiceWorker();
(7) 如何使用？
import * as React from 'react';
import {Dispatch} from 'redux';
import {connect} from 'react-redux';
import {addTodo} from './containers/home/modules/anctions';
import {Button} from 'antd';
import './App.less';
interface IAppProps {
addTodo?: any;
todos?: any;
}
class App extends React.Component<IAppProps> {
constructor(props: any) {
super(props);
}
// 组件内分发action,改变store中的属性值
public change = () => {
const myName = '我叫二白';
this.props.addTodo(myName)
};
// 把store绑定在视图层上
public render() {
console.log(this.props);
return (
<div className='App'>
<div>{this.props.todos.todo.text}</div>
<Button onClick={() => this.change()}>redux点击一下</Button>
</div>
);
}
}
// mapStateToProps(state, ownProps) 方法允许我们将store中的数据作为props绑定到组件中，
只要store更新了就会调用mapStateToProps方法，
mapStateToProps返回的结果必须是object对象，该对象中的值将会更新到组件中;
const mapStateToProps = (state: any) => ({
todos: state
});
// mapDispatchToProps(dispatch, [ownProps]) 第二个参数允许我们将action作为props绑定到组件中，
mapDispatchToProps希望你返回包含对应action的object对象;
const mapDispatchToProps = (dispatch: Dispatch<any>) => {
return {
addTodo: (payload: string) => dispatch(addTodo(payload)),
}
};
export default connect(mapStateToProps, mapDispatchToProps)(App);