React Hooks demo

react hooks demo

创建所需要的组件，这个项目我们分成三个组件，分别是头部，搜索框，电影列表

// Header.js
import React from 'react'
export default function Header(props) {
 return (
     <div>
         <header className="app_header">
             <h2>{props.text}</h2>
            </header>
        </div>
    )    
}

// Movie.js
import React from 'react'

const DEFAULT_PLACEHOLDER_IMAGE = 'https://m.media-amazon.com/images/M/MV5BMTczNTI2ODUwOF5BMl5BanBnXkFtZTcwMTU0NTIzMw@@._V1_SX300.jpg'

export default function Movie({movie}) {
    const poster = movie.Poster = 'N/A' ? DEFAULT_PLACEHOLDER_IMAGE : movie.Poster
    return (f
     <div className="movie">
         <h2>{movie.Title}</h2>
            <div>
             <img width="200" src={poster} alt={`The Movie Titled: ${movie.Title}`} />
            </div> 
        </div>
    )
}

// Search.js
import React, { useState } from 'react'

export default function Search(props) {
    const [searchValue, setSearchValue] = useState('')
    
    const handleSearchInputChanges = (e) => {
        setSearchValue(e.target.value)
    }
    const resetInputField = () => {
        setSearchValue('')
    }
    const handleInputSearch = (e) => {
        e.preventDefault()
        props.search(searchValue)
        resetInputField()
    }
    
    return (
     <div>
         <form className="search">
             <input type="text" onChange={handleSearchInputChanges} value={searchValue}  />
                <input type="submit" onClick={handleInputSearch} value="SEARCH" />
            </form>
        </div>
    )
}

创建App.js

// App.js
import React, { useState, useEffect } from 'react'
import Header from './Header.js'
import Movie from './Movie.js'
import Search from './Search.js'
import axios from 'axios'

const MOVIE_API_URL = 'https://www.omdbapi.com/?s=man&apikey=62b53dxx'

export default function App() {
    const [loading, setLoading] = useState(true)
    const [movie, setMovie] = useState([])
    const [errorMessage, setErrorMessage] = useState(null)
    /**
    这里我们使用了三个useState函数，所以在一个组件中可以有多个useState函数
    1. loading: 用于处理加载状态，加载时页面呈现一个Loading
    2. movie: 用于处理从服务器获取的movies数组/数据
    3. errorMessage: 用于处理在发出API请求时可能发生的任何错误
    */
    
    const search = (searchVal) => {
        setLoading(false)
        setErrorMessage(null)
        axios.get(`https://www.omdbapi.com/?s=${searchVal}&apikey=62b53dxx`).then(res => {
            if (res.data.Response === 'True') {
                setMovie(res.data.Search)
            } else {
                setErrorMessage(res.data.Error)
            }
            setLoading(false)
        })
    }
    
    useEffect(() => {
        axios.get(MOVIE_API_URL).then(res => {
            setMovie(res.data.Search)
            setLoading(false)
        })
    }, [])
    /**
    这里使用了useEffect，这个Hooks可以让你在函数式组件中执行副作用， 所谓的副作用是指数据获取，订阅和手动操作DOM
    我们也可以将useEffect看作是componentDidMount, componentDidUpdate和componentWillUnmount的组合(这是因为在组件第一次render之后(componentDidMount)和每次组件更新之后(componentDidUpdate), useEffect都会被调用)
    */
    
    return (
     <div className="App">
         <Header text={Movies Demo} />
            <Search search={search} />
            <div className="movies">
                {
                    loading && !errorMessage ? (<span>loading...</span>)   : 
                     errorMessage            ? (<div>{errorMessage}</div>) : 
                    (movie.map((item, index) => {<Movie key={`${index}-${movie.Title}`} movie={item} />}))
                }
            </div>
        </div>
    )
}

如果项目中需要定义多个状态，那我们使用useState会显得代码比较冗余，也比较乱，建议用useReducer,统一管理下代码。我们修改App.js文件如下：

import React, { useReducer } from 'react'
import Header from './Header'
import Movie from './Movie'
import Search from './Search'
import axios from 'axios'

const initialState = {
    loading: true,
    movie: [],
     errorMessage: null
}

const reducer = (state, action) => {
    switch(action.type) {
        case 'SEARCH_MOVIE_REQUEST':
            return {
                ...state,
                loading: true,
                errorMessage: null
            } 
        case "SEARCH_MOVIE_SUCCESS":
            return {
                ...state,
                loading: false,
                movie: action.payload
            }
        case 'SEARCH_MOVIE_FAILURE': 
            return {
                ...state,
                loading: false,
                errorMessage: action.error
            }
        default: 
            return state
    }
}

export default App() {
    const [state, dispatch] = useReducer(reducer, initialState)
    
    const { loading, movie, errorMessage } = state
    
    const search = (searchVal) => {
        // setLoading(false)
        // setErrorMessage(null)
        // 修改为：
        dispatch({
            type: 'SEARCH_MOVIE_REQUEST'
        })
        
        axios.get(`https://www.omdbapi.com/?s=${searchVal}&apikey=62b53dxx`).then(res => {
            if (res.data.Response === 'True') {
                // setMovie(res.data.Search)
                // 修改为：
                dispatch({
                    type: 'SEARCH_MOVIE_SUCCESS',
                    payload: res.data.Search
                })
            } else {
                // setErrorMessage(res.data.Error)
                // 修改为：
                dispatch({
                    type: 'SEARCH_MOVIE_FAILURE',
                    error: res.data.Error
                })
            }
            // setLoading(false)
        })
    }
    
    useEffect(() => {
        axios.get(MOVIE_API_URL).then(res => {
            // setMovie(res.data.Search)
            // setLoading(false)
            // 修改为：
            dispatch({
                type: 'SEARCH_MOVIE_SUCCESS',
                payload: res.data.Search
            })
        })
    }, [])
    
     return (
     <div className="App">
         <Header text={Movies Demo} />
            <Search search={search} />
            <div className="movies">
                {
                    loading && !errorMessage ? (<span>loading...</span>)   : 
                     errorMessage            ? (<div>{errorMessage}</div>) : 
                    (movie.map((item, index) => {<Movie key={`${index}-${movie.Title}`} movie={item} />}))
                }
            </div>
        </div>
    )
}

这样好像看起来还是代码有点多，而且全部都写在App.js这个文件中，我们可以把state和reducer拆分到另外的文件，然后再引入

我们在src目录下新建一个store文件夹,store目录下再建一个reducer文件夹

//  src/store/reducer/index.js

export const initialState = {
    loading: true,
    movie: [],
    errorMessage: null
}

export const reducer = (state, action) => {
    switch(action.type) {
            case: 'SEARCH_MOVIE_REQUSET': 
             return {    
                    ...state, 
                    loading: false,
                    errorMessage: null
                }
            case: 'SEARCH_MOVIE_SUCCESS':
             return {
                    ...state, 
                    loading: true,
                    movie: action.payload
                }
            case: 'SEARCH_MOVIE_FAILURE': 
             return {
                    ...state, 
                    loading: true,
                    errorMessage: action.error
                }
        default: 
            return state
    }
}

在App.js中引入,然后就可以使用我们自定义的state和reducer了

import { initialState, reducer } from '../store/reducer'