-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
11 changed files
with
118 additions
and
101 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -98,19 +98,21 @@ const config: any = { | |
|
|
||
| development ? null : new webpack.HashedModuleIdsPlugin(), | ||
| development ? null : new webpack.optimize.OccurrenceOrderPlugin(false), | ||
| development ? null : new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), | ||
| development ? null : new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }), | ||
| development ? null : new webpack.optimize.ModuleConcatenationPlugin(), | ||
| // development ? null : new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), // webpack 4 delete | ||
| // development ? null : new webpack.optimize.CommonsChunkPlugin({ name: 'manifest' }), // webpack 4 delete | ||
| // development ? null : new webpack.optimize.ModuleConcatenationPlugin(), // webpack 4 defualt exist | ||
| development ? null : new BundleAnalyzerPlugin(), | ||
| development | ||
| ? null | ||
| // 在 4.x 版本之前，用的是 extract-text-webpack-plugin，不过 [email protected] 不支持使用。 | ||
| : new Extract({ | ||
| filename: 'index-[chunkhash:8].css', | ||
| disable: false, | ||
| allChunks: true | ||
| }), | ||
| development | ||
| ? null | ||
| // webpack 4 默认提供？？？ | ||
| : new Uglify({ | ||
| uglifyOptions: { | ||
| compress: { warnings: false }, | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,25 @@ | ||
| import * as React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import { injectModule } from '@store'; | ||
| import * as mod from './counter.module' | ||
| import * as mod from './counter.module'; | ||
|
|
||
| injectModule('counter', mod) | ||
| class CounterPage extends React.Component<any, any> { | ||
| render() { | ||
| return <div> | ||
| <h1>{this.props.counter}</h1> | ||
| <button onClick={this.props.inc}>inc</button> | ||
| <button onClick={this.props.dec}>dec</button> | ||
| <button onClick={this.props.asyncInc}>async_inc</button> | ||
| <button onClick={this.props.asyncDec}>async_dec</button> | ||
| <button onClick={this.props.intervalInc}>interval_inc</button> | ||
| </div> | ||
| } | ||
| injectModule('counter', mod); | ||
|
|
||
| function CounterPage(props) { | ||
| return ( | ||
| <div> | ||
| <h1>{props.counter}</h1> | ||
| <button onClick={props.inc}>inc</button> | ||
| <button onClick={props.dec}>dec</button> | ||
| <button onClick={props.asyncInc}>async_inc</button> | ||
| <button onClick={props.asyncDec}>async_dec</button> | ||
| <button onClick={props.intervalInc}>interval_inc</button> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| function mapStateToProps({ counter }) { | ||
| return { counter }; | ||
| return { counter }; | ||
| } | ||
|
|
||
| export default connect(mapStateToProps, mod.actions)(CounterPage); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,3 @@ | ||
| import { empty } from 'rxjs/Observer'; | ||
|
|
||
| export function emptyActon() { | ||
| return { type: 'empty-action' }; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,85 +1,88 @@ | ||
| import { Observable } from 'rxjs'; | ||
| import { from, of } from 'rxjs'; | ||
| import { login } from '@servers/auth'; | ||
| import { compose } from 'redux'; | ||
| import { emptyActon } from '@store/common/actions'; | ||
| import { map, catchError, switchMap } from 'rxjs/operators'; | ||
|
|
||
| const LOGIN = `AUTH/LOGIN`; | ||
| const LOGIN_SUCCESS = `AUTH/LOGIN_SUCCESS`; | ||
| const LOGIN_FAILD = `AUTH/LOGIN_FAILD`; | ||
| const LOGOUT = `AUTH/LOGOUT`; | ||
|
|
||
| const init = { | ||
| user: {}, | ||
| logined: false, | ||
| logining: false | ||
| user: {}, | ||
| logined: false, | ||
| logining: false | ||
| }; | ||
|
|
||
| export function reducer(state = init, action) { | ||
| let { type, payload } = action; | ||
| switch (type) { | ||
| case LOGIN: | ||
| return { | ||
| ...state, | ||
| logining: true | ||
| }; | ||
| case LOGIN_SUCCESS: | ||
| return { | ||
| ...state, | ||
| ...payload, | ||
| logined: true, | ||
| logining: false | ||
| }; | ||
| case LOGIN_FAILD: | ||
| return { | ||
| ...state, | ||
| ...payload, | ||
| logining: false | ||
| }; | ||
| case LOGOUT: | ||
| return init; | ||
| default: | ||
| return state; | ||
| } | ||
| let { type, payload } = action; | ||
| switch (type) { | ||
| case LOGIN: | ||
| return { | ||
| ...state, | ||
| logining: true | ||
| }; | ||
| case LOGIN_SUCCESS: | ||
| return { | ||
| ...state, | ||
| ...payload, | ||
| logined: true, | ||
| logining: false | ||
| }; | ||
| case LOGIN_FAILD: | ||
| return { | ||
| ...state, | ||
| ...payload, | ||
| logining: false | ||
| }; | ||
| case LOGOUT: | ||
| return init; | ||
| default: | ||
| return state; | ||
| } | ||
| } | ||
|
|
||
| export const actions = { | ||
| login(user) { | ||
| return { type: LOGIN, payload: { user } }; | ||
| }, | ||
| loginSuccess(user) { | ||
| return { type: LOGIN_SUCCESS, payload: { user } }; | ||
| }, | ||
| loginFaild({ message }) { | ||
| return { type: LOGIN_FAILD, payload: { error: message } }; | ||
| }, | ||
| logout() { | ||
| return { type: LOGOUT }; | ||
| } | ||
| login(user) { | ||
| return { type: LOGIN, payload: { user } }; | ||
| }, | ||
| loginSuccess(user) { | ||
| return { type: LOGIN_SUCCESS, payload: { user } }; | ||
| }, | ||
| loginFaild({ message }) { | ||
| return { type: LOGIN_FAILD, payload: { error: message } }; | ||
| }, | ||
| logout() { | ||
| return { type: LOGOUT }; | ||
| } | ||
| }; | ||
|
|
||
| const effect = { | ||
| cacheAuth(user) { | ||
| localStorage.auth = JSON.stringify({ user, logined: true }); | ||
| return user; | ||
| }, | ||
| clearAuth(arg) { | ||
| localStorage.removeItem('auth'); | ||
| return arg; | ||
| } | ||
| cacheAuth(user) { | ||
| localStorage.auth = JSON.stringify({ user, logined: true }); | ||
| return user; | ||
| }, | ||
| clearAuth(arg) { | ||
| localStorage.removeItem('auth'); | ||
| return arg; | ||
| } | ||
| }; | ||
|
|
||
| const loginEpic = (action$, store) => | ||
| action$.ofType(LOGIN).switchMap(act => | ||
| Observable.fromPromise(login(act.payload.user)) | ||
| .map(effect.cacheAuth) | ||
| .map(actions.loginSuccess) | ||
| .catch(compose((err: any) => Observable.of(actions.loginFaild(err)), effect.clearAuth)) | ||
| ); | ||
| const loginEpic = (action$, store) => { | ||
| return action$ | ||
| .ofType(LOGIN) | ||
| .pipe( | ||
| switchMap((act: any) => | ||
| from(login(act.payload.user)).pipe( | ||
| map(effect.cacheAuth), | ||
| map(actions.loginSuccess), | ||
| catchError(compose((err: any) => of(actions.loginFaild(err)), effect.clearAuth)) | ||
| ) | ||
| ) | ||
| ); | ||
| }; | ||
|
|
||
| const logoutEpic = action$ => | ||
| action$ | ||
| .ofType(LOGOUT) | ||
| .map(effect.clearAuth) | ||
| .map(emptyActon); | ||
| const logoutEpic = (action$) => action$.ofType(LOGOUT).pipe(map(effect.clearAuth), map(emptyActon)); | ||
|
|
||
| export const epics = [loginEpic, logoutEpic]; | ||
| export const epics = [ loginEpic, logoutEpic ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters