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

bookCreating the Posts Slice

Now we will create the posts slice to be able to create, store and display posts. Create a new file called postsSlice.js in the features folder. We will use the createSlice function to create the slice, as we did in the previous chapter.

The slice will have a posts array which will initially be empty, lastID state which will have a value of 0 initially, and a createPost action which will be used for appending posts (in the form of JS objects) to the array in the store.

We also need to export the action, a selector, and reducer.

export const { createPost } = postsSlice.actions;
export const selectPosts = (state) => state.post.posts;
export default postsSlice.reducer;

Now that the export is done, we will import it in the store.js to create the slice. The store.js should look something like this:

import { configureStore } from '@reduxjs/toolkit';
import profileReducer from '../features/profileSlice';
import postsReducer from '../features/postsSlice';

export const store = configureStore({
  reducer: {
    profile: profileReducer,
    post: postsReducer
  },
});

In the next chapter, we will try to make the posting feature functional.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5

Fragen Sie AI

expand

Fragen Sie AI

ChatGPT

Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen

Awesome!

Completion rate improved to 3.45

bookCreating the Posts Slice

Swipe um das Menü anzuzeigen

Now we will create the posts slice to be able to create, store and display posts. Create a new file called postsSlice.js in the features folder. We will use the createSlice function to create the slice, as we did in the previous chapter.

The slice will have a posts array which will initially be empty, lastID state which will have a value of 0 initially, and a createPost action which will be used for appending posts (in the form of JS objects) to the array in the store.

We also need to export the action, a selector, and reducer.

export const { createPost } = postsSlice.actions;
export const selectPosts = (state) => state.post.posts;
export default postsSlice.reducer;

Now that the export is done, we will import it in the store.js to create the slice. The store.js should look something like this:

import { configureStore } from '@reduxjs/toolkit';
import profileReducer from '../features/profileSlice';
import postsReducer from '../features/postsSlice';

export const store = configureStore({
  reducer: {
    profile: profileReducer,
    post: postsReducer
  },
});

In the next chapter, we will try to make the posting feature functional.

War alles klar?

Wie können wir es verbessern?

Danke für Ihr Feedback!

Abschnitt 4. Kapitel 5
some-alt