So right now, if we look at our devtools and you'll see that we have state, we have our form. We don't really need to worry about that. We have our posts, our recentPosts, and posts.

Now if you're not seeing all these posts, what you need to do is just head to the root, go to localhost and then whatever port you're running it on. Most likely 3000. I'm running mine on 3030. This will get our recent posts and we have a reducer set up for it so it will throw it into recent posts.

Basically, what we want is to see a bunch of posts in posts as well. So, not empty. We want to see whatever we search in here. So when we search rails, we will get back 8 posts. We want to see this 8 posts in posts here. So really simple logic.

All we have to do is first set up a type in our types.js. Let's say:

types.js

export const SET_RECENT_POSTS = 'SET_RECENT_POSTS';
export const SET_RESULTS_POSTS = 'SET_RESULTS_POSTS';

Now we need to add to our index.js in our actions. We need to import this. I'm going to put this on a new line. I'm going to say SET_RESULTS_POSTS.

index.js

import { 
    SET_RECENT_POSTS,
    SET_RESULTS_POSTS
} from './types';

Now we just need to dispatch it. So we're getting our data, and we're logging it. We don't want to log that anymore, but we will leave it for now. I'll leave it at SET_RECENT_POSTS and we'll look at what happens.

If I do SET_RECENT_POSTS, the same as up here. What's going to happen is whenever we search it's going overwrite RecentPosts. So our home contains our RecentPosts right? Now, if I search posts, the reason this is moving all around. I just want to clarify what's going on.

This form that we set it up with the Redux form. It's part of our state, and our two searchbars and the data is going to be constantly changing. The query is going to be constantly changing, so that's why everything's moving around.

Now let me just see if I can explain this similar. Why the bottom part is moving. Well just know that this is part of Redux. This is using redux-forms. That's why our state is going wonky there. Now, we want to test this out.

Back on topic, what I did was I said type: SET_RECENT_POSTS same as fetchRecentPosts, so when we search it, it's going to overwrite this data. So I'm going to search rails, and then when I hit enter you're going to see RecentPosts. It changes to just these 8 posts, which is not what we want.

So what we need to do is set it to posts. When we hit SET_RECENT_POSTS it's going to reducers and it overwrites our RecentPosts. What we need to do is instead of dispatching SET_RECENT_POSTS in our index.js interactions, we need to SET_RESULTS_POSTS.

If we try this out it wouldn't work because we don't have a reducer for it yet. So let's go to postsReducer.js and set it up. Let's type out our case, SET_RESULTS_POSTS, and then let's get our constant. Let's say:

postsReducer.js

        case SET_RECENT_POSTS:
            const recentPosts = action.payload;
            return {
                    ...state,
                    recentPosts
                }
        case SET_RESULTS_POSTS:
                const resultsPosts = action.payload;
                return {
                    ...state, 
                    posts: resultsPosts
                }
        default:
            return state;
    }
}

Now the reason I have to clarify this posts is resultsPosts, and not right here, is because this is already equal the recentPosts so we can just do that. Now if I just name this posts this will work fine.

So what am I going to do is just rename posts in your initial state to resultsPosts. So up here, I'm going to say resultsPosts. Now I really don't like the way I'm naming it resultsPosts, it sounds weird, but I feel like it's I good separation from recentPosts and of just calling it posts.

Now we could even set up an entire new reducer called results, and then have our other reducer called recent, but since they are both posts we are just going to put it under a postsReducer. It's up to you. You could have one reducer for everything, but again readability makes it nice when you separate things.

SET_RESULTS_POSTS should be working now. Let's go ahead and close out of our reducer, let's close out our actions, our types. We don't really need to worry about closing things out. Basically, if we go to our app now, it looks like we have a error and that's because we didn't import it into our reducers.

Let's go into our postsReducer.js, and let's import it underneath SET_RECENT_POSTS.

postsReducer.js

import { 
    SET_RECENT_POSTS,
    SET_RESULTS_POSTS
} from '../actions/types';

Let's go back to our Redux in our app. When we search now, we should overwrite posts. So ResultsPosts has our data. RecentPosts doesn't have anything because we haven't visited the home yet. So if I do that and then I type in results, you'll see that we now have ResultsPosts and RecentPosts.

Now, these should be different values, let's just make sure. That's Associated Topics, Python Tutorial Flask. I'm going to check this one, and Associated Topics Neo4J. Yeah. So basically, it's different data. It just so happens to be that there is the same amount. Nine each.

I'm just going to test it one more time. Sometimes you get a different value. I'm going to type in python and whatever it doesn't matter. It's working, so let's go ahead and let's see what we can do. If we type in here again. Let's say rails. You'll notice that overwrites our posts.

It looks a little crazy, but it overwrites ResultsPosts. That's working. There's 7 of them. There's still 19 in our RecentPosts. Let's see what we need to do next. We need to map state to props in our resultsPosts.js and get the data displaying in here like we have in our recentPosts.js. We'll do that in the next guide.

Let's commit our code. I'm going to say git status, git add ., and then let's say git commit -m "added SET_RESULTS_POSTS reducer". I will catch you in the next guide where we will modify our mapStateToProps to take in the right data, and then we will display it into our component here with our posts component. See you then.

Resources

• Source Code