Features
Typescript
强类型的JavaScript，提高编码、debug效率
React
facebook开源库，基于JSX语法创建组件
Redux
可预测状态容器，最流行的react状态管理方案
Docker
虚拟化容器，一键打包部署发布
Quick start
-
npm install -g typescript -
git clone [email protected]:SakuraAsh/about-life.git -
cd about-life -
yarn install && yarn start
build
yarn run build
Example
container
/**
* action.ts
* */
export function someAction(name: string) {
return {
type: 'GET_SOME_DATA',
name,
}
}
/**
* reducer.ts
* */
const initialState = fromJS({
myInfo: {}
});
const reducer: Reducer<State> =
(state: State = initialState, action: Action) => {
switch (action.type) {
case 'FETCH_USER_FULFILLED':
return state.set('myInfo', fromJS(action.data));
default:
return state;
}
}
/**
* epic.ts
* */
// must be imported
import 'rxjs';
const pingEpic: Epic<Action, LifeStore> = (action$: ActionsObservable<Action>) =>
action$.filter((action: Action) => action.type === 'PING')
.delay(1000)
.mapTo({ type: 'PONG' });
const fetchUserEpic: Epic<Action, LifeStore> = (action$: ActionsObservable<Action>) =>
action$.ofType('GET_SOME_DATA')
.mergeMap((action: Action) =>
ajax.getJSON(`https://api.github.com/users/${action.name}`)
.map(response => getSuccess(response))
);
export default combineEpics(
pingEpic,
fetchUserEpic
);
/*
* index.tsx
* */
interface Props {
asyncRequest: (name: string) => void;
}
interface State {
requesting: boolean;
}
class Auth extends PureComponent<Props, State>{
render(): ReactNode {
return (<div>
{/*your code*/}
</div>);
}
}
// inject redux-ovservable epics
injectEpics('about', aboutEpics);
const mapStateToProps = (state: any) => {
return {
myInfo: state.about.myInfo,
}
};
const mapDispatchToProps = (dispatch: any) => ({
asyncRequest: (name: string) => dispatch(someAction(name))
});
function mergePropss(stateProps: Object, dispatchProps: Object, ownProps: Object) {
return Object.assign({}, ownProps, stateProps, dispatchProps);
}
const withReducer = injectReducer({ key: 'about', reducer });
const withConnect = connect(mapStateToProps, mapDispatchToProps, mergePropss);
export default compose(withReducer, withConnect)(About);License
MIT