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

Kursinnehåll

Introduction to Redux

Introduction to Redux

1. Getting Started
What is Redux?Why Redux? When to use Redux?Setting up a React-Redux Application
2. Fundamental Concepts
Redux ActionsRedux ReducersRedux StoreStore Dispatch MethodSelectorsRedux Data Flow
3. Redux in Practice
Redux Application Structure Modifying the Template for UseCreating the Redux StoreRedux SliceCreating a SliceUnderstanding SliceUsing Selectors to access StateModifying State by Dispatching ActionsThunk FunctionsRules for ReducersUnderstanding the Counter Application
4. Creating a React-Redux Application
The ApplicationSetting Up the ApplicationCreating the UI SkeletonCreating the Profile SliceCreating the Posts SliceCompleting the Posts featureDisplaying Number of Posts and UsersAdding CSS Styling

book
Completing 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.

js

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.

js

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

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6

Fråga AI

expand
ChatGPT

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

course content

Kursinnehåll

Introduction to Redux

Introduction to Redux

1. Getting Started
What is Redux?Why Redux? When to use Redux?Setting up a React-Redux Application
2. Fundamental Concepts
Redux ActionsRedux ReducersRedux StoreStore Dispatch MethodSelectorsRedux Data Flow
3. Redux in Practice
Redux Application Structure Modifying the Template for UseCreating the Redux StoreRedux SliceCreating a SliceUnderstanding SliceUsing Selectors to access StateModifying State by Dispatching ActionsThunk FunctionsRules for ReducersUnderstanding the Counter Application
4. Creating a React-Redux Application
The ApplicationSetting Up the ApplicationCreating the UI SkeletonCreating the Profile SliceCreating the Posts SliceCompleting the Posts featureDisplaying Number of Posts and UsersAdding CSS Styling

book
Completing 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.

js

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.

js

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

Var allt tydligt?

Hur kan vi förbättra det?

Tack för dina kommentarer!

Avsnitt 4. Kapitel 6
Vi beklagar att något gick fel. Vad hände?
some-alt