https://github.com/aaaaash/typescript-react-redux-starter-kit
🏅🎖🥇Typescript+React全家桶脚手架
https://github.com/aaaaash/typescript-react-redux-starter-kit
docker nginx nodejs react redux-observable typescript
Last synced: 9 months ago
JSON representation
🏅🎖🥇Typescript+React全家桶脚手架
- Host: GitHub
- URL: https://github.com/aaaaash/typescript-react-redux-starter-kit
- Owner: Aaaaash
- License: mit
- Created: 2017-11-27T09:48:03.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-07T07:05:35.000Z (almost 8 years ago)
- Last Synced: 2025-03-17T18:54:34.010Z (9 months ago)
- Topics: docker, nginx, nodejs, react, redux-observable, typescript
- Language: JavaScript
- Homepage:
- Size: 187 KB
- Stars: 21
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## Features
[](https://juejin.im/entry/5a28fce4f265da430b7b21d2/detail)
### [Typescript](https://github.com/Microsoft/TypeScript)
强类型的JavaScript，提高编码、debug效率
### [React](https://github.com/facebook/react)
facebook开源库，基于JSX语法创建组件
### [Redux](https://github.com/reactjs/redux)
可预测状态容器，最流行的react状态管理方案
### [Docker](https://www.docker.com/)
虚拟化容器，一键打包部署发布
## Quick start
1. `npm install -g typescript`
2. `git clone git@github.com:SakuraAsh/about-life.git`
3. `cd about-life`
4. `yarn install && yarn start`
### build
1. `yarn run build`
## Example
### container
```javascript
/**
* action.ts
* */
export function someAction(name: string) {
return {
type: 'GET_SOME_DATA',
name,
}
}
/**
* reducer.ts
* */
const initialState = fromJS({
myInfo: {}
});
const reducer: Reducer =
(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$: ActionsObservable) =>
action$.filter((action: Action) => action.type === 'PING')
.delay(1000)
.mapTo({ type: 'PONG' });
const fetchUserEpic: Epic = (action$: ActionsObservable) =>
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{
render(): ReactNode {
return (
{/*your code*/}
);
}
}
// 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