Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Leer Completing the Posts feature | Creating a React-Redux Application
Introduction to Redux

bookCompleting the Posts feature

We will now edit the PostsSection component to make it functional. First, we need to import the relevant action and selector from postsSlice to index.js.

import { selectPosts, createPost } from './features/postsSlice';

When we click the Post button, it should dispatch the createPost action with the relevant data. We will store the text of the textarea element inside a local state called text.

However, we also need an interface for showing the add posts. For that, we will create a new component called Posts and use the selectPosts selector to retrieve the posts and display them using the map method.

function Posts(props) {
  const posts = useSelector(selectPosts);
  return (
    <div>
      {posts.map((item) => 
        <div key={item.id}>
          <p>{item.text}</p>
          <p>{item.author}</p>
        </div>
      )}
    </div>
  );
} 

We can now show this component inside the PostsSection.

We can further improve the code but creating a new component called CreatePost and putting the relevant code into that component to make things more organized.

Currently, the UI might look very rough and simplistic, but we will add CSS styling in the upcoming chapters.

If you try creating new posts they should appear in the form of a list.

question mark

Which action is used for creating new posts?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 6

Vraag AI

expand

Vraag AI

ChatGPT

Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.

Awesome!

Completion rate improved to 3.45

bookCompleting the Posts feature

Veeg om het menu te tonen

We will now edit the PostsSection component to make it functional. First, we need to import the relevant action and selector from postsSlice to index.js.

import { selectPosts, createPost } from './features/postsSlice';

When we click the Post button, it should dispatch the createPost action with the relevant data. We will store the text of the textarea element inside a local state called text.

However, we also need an interface for showing the add posts. For that, we will create a new component called Posts and use the selectPosts selector to retrieve the posts and display them using the map method.

function Posts(props) {
  const posts = useSelector(selectPosts);
  return (
    <div>
      {posts.map((item) => 
        <div key={item.id}>
          <p>{item.text}</p>
          <p>{item.author}</p>
        </div>
      )}
    </div>
  );
} 

We can now show this component inside the PostsSection.

We can further improve the code but creating a new component called CreatePost and putting the relevant code into that component to make things more organized.

Currently, the UI might look very rough and simplistic, but we will add CSS styling in the upcoming chapters.

If you try creating new posts they should appear in the form of a list.

question mark

Which action is used for creating new posts?

Select the correct answer

Was alles duidelijk?

Hoe kunnen we het verbeteren?

Bedankt voor je feedback!

Sectie 4. Hoofdstuk 6
some-alt