Learn React Hooks

Defining the Reducer Hook

Finally, we are going to define and use the Reducer Hook for the posts state:

1. We start by removing the following State Hook in src/App.js:

       const [ posts, setPosts ] = useState(defaultPosts)

We replace it with the following Reducer Hook:

       const [ posts, dispatchPosts ] = useReducer(postsReducer, defaultPosts)

2. Then, we pass the dispatchPosts function to the CreatePost component, as a dispatch prop:

            {user && <CreatePost user={user} posts={posts} dispatch={dispatchPosts} />}

3. Next, we edit the CreatePost component in src/post/CreatePost.js, and replace the setPosts function with the dispatch function:

export default function CreatePost ({ user, posts, dispatch }) {

4. Finally, we use the dispatch function in the ...