Function App

examples/files/app/networking.js:12–54

()

import { actionCreators, initialState, reducer } from './posts'

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  useEffect(() => {
    async function fetchPosts() {
      dispatch(actionCreators.loading())

      try {
        const response = await fetch(
          'https://jsonplaceholder.typicode.com/posts'
        )
        const posts = await response.json()
        dispatch(actionCreators.success(posts))
      } catch (e) {
        dispatch(actionCreators.failure())
      }
    }

    fetchPosts()
  }, [])

  const { posts, loading, error } = state

  if (loading) {
    return (
      <View style={styles.center}>
        <ActivityIndicator animating={true} />
      </View>
    )
  }

  if (error) {
    return (
      <View style={styles.center}>
        <Text>Failed to load posts!</Text>
      </View>
    )
  }

  return (
    <FlatList
      style={styles.container}
      keyExtractor={(post) => post.id}
      data={posts}
      renderItem={({ item: { id, title, body }, index }) => (
        <View key={id} style={styles.post}>