Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 812f499

Browse files
author
schowdhury
committed
(React-Redux-Observable-TypeScript): TypeScript configuration complete
1 parent 5cff63d commit 812f499

File tree

20 files changed

+445
-110
lines changed

20 files changed

+445
-110
lines changed

‎app/config/IState.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import IAuthInfo from "../features/auth/IAuthInfo";
2+
3+
export default interface IState {
4+
authInfo: IAuthInfo
5+
}
Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { combineEpics } from 'redux-observable';
2-
import { epicChecklogin } from '../features/signup/epicSignup';
2+
import { epicCheckLogin } from '../features/auth/epicAuth';
33

44
// List all the epics here
55
export default combineEpics(
6-
epicChecklogin,
6+
epicCheckLogin,
77
);

‎app/config/rootReducer.js‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎app/config/rootReducer.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import {combineReducers} from "redux";
2+
import reducerAuth from "../features/auth/reducerAuth";
3+
import IState from "./IState";
4+
5+
export default combineReducers <IState>({
6+
authInfo: reducerAuth
7+
})

‎app/config/store.js‎ renamed to ‎app/config/store.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
import {createStore, applyMiddleware, compose} from "redux";
1+
import {createStore, applyMiddleware, compose,Action} from "redux";
22
import { createEpicMiddleware } from 'redux-observable';
33

4+
import IState from "../config/IState";
45
import rootReducer from "./rootReducer";
56
import rootEpic from "./rootEpic";
67

7-
const epicMiddleware = createEpicMiddleware();
8+
const epicMiddleware = createEpicMiddleware<Action<any>,Action<any>,IState>();
89

910
const middlewares = [
1011
epicMiddleware
1112
];
1213
const initialState = {};
1314

14-
const composeEnhancers = (window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
15+
const composeEnhancers = (windowasany).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
1516
const enhancers = composeEnhancers(applyMiddleware(...middlewares));
1617

1718
export const Store = createStore(rootReducer, initialState, enhancers);

‎app/features/auth/IAuthInfo.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default interface IAuthInfo{
2+
status: boolean
3+
}

‎app/features/auth/actionAuth.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import {Action} from "redux";
2+
3+
export const enum TypeActionAuth {
4+
checkLogin = "AuthInfo > checkLogin",
5+
setLogin = "AuthInfo > setLogin",
6+
};
7+
8+
export interface IActionAuth extends Action {
9+
status?: boolean;
10+
type: TypeActionAuth;
11+
}
12+
13+
export const actionCheckIsLoggedIn = (): IActionAuth => ({
14+
type: TypeActionAuth.checkLogin,
15+
});
16+
17+
export const actionSetIsLoggedIn = (status: boolean): IActionAuth => ({
18+
type: TypeActionAuth.setLogin,
19+
status
20+
});

‎app/features/auth/epicAuth.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {Epic, ofType} from "redux-observable";
2+
import {Action} from "redux";
3+
import {actionSetIsLoggedIn, TypeActionAuth} from "./actionAuth";
4+
import IState from "../../config/IState";
5+
6+
import {switchMap} from 'rxjs/operators';
7+
import {from} from "rxjs";
8+
9+
export const epicCheckLogin: Epic<Action, Action, IState> = ( action$, state$ ) =>
10+
action$.pipe(
11+
ofType(TypeActionAuth.checkLogin),
12+
switchMap(
13+
() => {
14+
const actions: Action[] = [
15+
actionSetIsLoggedIn(true),
16+
];
17+
18+
return from(actions);
19+
}
20+
)
21+
);

‎app/features/auth/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import * as React from 'react';
2+
import {connect} from "react-redux";
3+
import {Action, Dispatch} from "redux";
4+
import {actionCheckIsLoggedIn} from "./actionAuth";
5+
6+
import IState from "../../config/IState";
7+
8+
interface ISignupState {
9+
status: boolean
10+
}
11+
12+
interface ISignupDispatch {
13+
onLoadCheckLogin: () => Action<any>
14+
}
15+
16+
interface ISignupProps extends ISignupState, ISignupDispatch {};
17+
18+
class _Auth extends React.PureComponent<ISignupProps> {
19+
public render (){
20+
const props = this.props;
21+
return (
22+
<div>
23+
<h4>Status: {props.status.toString()}</h4>
24+
<button onClick={props.onLoadCheckLogin}>Login please</button>
25+
</div>
26+
);
27+
}
28+
}
29+
30+
const mapState = (state: IState) => ({
31+
status: state.authInfo.status
32+
})
33+
34+
const mapDispatch = (dispatch: Dispatch) => ({
35+
onLoadCheckLogin: () => dispatch(actionCheckIsLoggedIn())
36+
})
37+
38+
export default connect(mapState, mapDispatch)(_Auth);

‎app/features/auth/reducerAuth.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import {TypeActionAuth, IActionAuth} from "./actionAuth";
2+
import IAuthInfo from "./IAuthInfo";
3+
4+
const initialState: IAuthInfo = {
5+
status: false,
6+
}
7+
8+
export default (state:IAuthInfo = initialState, action: IActionAuth) => {
9+
switch(action.type) {
10+
case TypeActionAuth.setLogin:
11+
return Object.assign(
12+
{},
13+
state,
14+
{status: action.status}
15+
)
16+
17+
default:
18+
return state;
19+
20+
}
21+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /