Creating 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.