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 f1896b0

Browse files
Added Types for reducers/actions/component-props ★
1 parent 4a47ad0 commit f1896b0

File tree

10 files changed

+56
-32
lines changed

10 files changed

+56
-32
lines changed

‎src/actions/index.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ActionTypes } from '../constants';
2+
import { ActionGetMovie } from '../models/actionTypes';
23

3-
export const getMovieData = () => ({
4+
export const getMovieAction = (): ActionGetMovie => ({
45
type: ActionTypes.GET_MOVIES,
5-
});
6+
});

‎src/components/movieComponent/index.tsx

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,18 @@
1-
import React from 'react';
1+
import React, { PureComponent } from 'react';
2+
import { AppState } from '../../rootReducer';
3+
import { ActionGetMovie } from '../../models/actionTypes';
4+
import { MovieComponentProperties } from '../../containers/movieContainer/movieContainer';
5+
interface MovieComponentState { }
26

3-
interface MovieComponentProps {
4-
getMovieData(): any;
5-
state: any
6-
}
7-
8-
interface MyComponentState { }
9-
10-
export default class MovieComponent extends React.Component<MovieComponentProps, MyComponentState> {
7+
export default class MovieComponent extends PureComponent<MovieComponentProperties, MovieComponentState> {
118
constructor(props: any) {
129
super(props)
1310
}
1411
componentDidMount() {
15-
this.props.getMovieData();
12+
this.props.getMovieAction();
1613
}
1714
render() {
18-
const results = this.props.state.GET_MOVIE_DATA.movie ? this.props.state.GET_MOVIE_DATA.movie.results : [];
15+
const results = this.props.state.movie ? this.props.state.movie.results : [];
1916
return (
2017
<nav>
2118
<ul>

‎src/constants/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export enum ActionTypes {
2-
GET_MOVIES = 'GET_MOVIE',
2+
GET_MOVIES = 'GET_MOVIES',
33
MOVIES_RETRIEVED = 'MOVIES_RETRIEVED'
44
}
Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,15 @@
11

22
import { connect } from 'react-redux';
3-
import { bindActionCreators } from 'redux';
4-
import { getMovieData } from '../../actions';
5-
import MovieComponent from '../../components/movieComponent'
3+
import { bindActionCreators, AnyAction, Dispatch } from 'redux';
4+
import { getMovieAction } from '../../actions';
5+
import MovieComponent from '../../components/movieComponent';
6+
import { AppState } from '../../rootReducer';
67

7-
const mapStateToProps = (state: any) => {
8-
return { state };
8+
const mapStateToProps = (state: AppState) => {
9+
return { state: state.GET_MOVIES };
910
}
1011

11-
const mapDispatchToProps = (dispatch: any) => bindActionCreators({ getMovieData }, dispatch);
12-
export default connect(mapStateToProps, mapDispatchToProps)(MovieComponent);
12+
const mapDispatchToProps = (dispatch: Dispatch<AnyAction>) => bindActionCreators({ getMovieAction }, dispatch);
1313

14+
export default connect(mapStateToProps, mapDispatchToProps)(MovieComponent);
15+
export type MovieComponentProperties = ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>;

‎src/models/actionTypes.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { ActionTypes } from '../constants/index';
2+
import { MovieType } from './responseType';
3+
4+
export interface ActionMoviesRetrieved {
5+
type: ActionTypes.MOVIES_RETRIEVED,
6+
data: MovieType,
7+
}
8+
9+
export interface ActionGetMovie {
10+
type: ActionTypes.GET_MOVIES,
11+
data?: MovieType
12+
}

‎src/models/responseType.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export default interface ResponseType {
2+
loading: boolean,
3+
movie?: MovieType,
4+
}
5+
6+
7+
export interface MovieType {
8+
page: number,
9+
results: any[],
10+
total_pages: number,
11+
total_results: number,
12+
}

‎src/models/typeMovie.ts

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

‎src/reducers/index.ts

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1-
import TypeMovie from '../models/typeMovie';
21
import { ActionTypes } from '../constants';
3-
2+
import ResponseType from '../models/responseType';
3+
import { ActionGetMovie } from '../models/actionTypes';
4+
import { ActionMoviesRetrieved } from '../models/actionTypes';
45

56
const initialState: any = {};
7+
type Actions = ActionGetMovie | ActionMoviesRetrieved;
68

7-
const MOVIE_REDUCER = (state = initialState, action: TypeMovie): any => {
8-
switch (action.type) {
9+
const MOVIE_REDUCER = (state = initialState, action: Actions): ResponseType => {
10+
const { type } = action;
11+
switch (type) {
912
case ActionTypes.GET_MOVIES:
1013
return { ...state, loading: true };
1114
case ActionTypes.MOVIES_RETRIEVED:

‎src/rootReducer.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ import { combineReducers } from "redux";
22
import MOVIE_REDUCER from './reducers/';
33
import { ActionTypes } from './constants';
44

5-
exportdefault combineReducers({
6-
[ActionTypes.GET_MOVIE]: MOVIE_REDUCER,
5+
constrootReducer= combineReducers({
6+
[ActionTypes.GET_MOVIES]: MOVIE_REDUCER,
77
});
88

9+
export type AppState = ReturnType<typeof rootReducer>;
10+
export default rootReducer;

‎src/sagas/index.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ function* getMovies() {
55
const data = yield fetch(`https://api.themoviedb.org/3/discover/movie?api_key=${key}&language=en-US`)
66
.then(response => response.json())
77
.catch(err => err);
8-
98
yield put({ type: "MOVIES_RETRIEVED", data: data });
109
}
1110

0 commit comments

Comments
(0)

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