Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn 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.

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 5

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Ask me questions about this topic

Summarize this chapter

Show real-world examples

bookCreating the Posts Slice

Swipe to show menu

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.

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 4. ChapterΒ 5
some-alt