Building a Blog With Reactjs And Laravel Part6 Admin Tags

Building a Blog With Reactjs And Laravel Part6: Admin Tags

In this tutorial of the series ‘creating blog with Laravel and Reactjs’ we continue by manipulating tags crud with redux, then connecting this to the UI.

 

 

 

 

The process of manipulating tags is straightforward the same as manipulating categories, we will first create the redux store then update the components but at first let’s create the apis using axios.

Create new file resources/js/admin/apis/Tag.js and add this code:

The above represent the api needed to do the actual CRUD operations for tags. Next let’s create the redux store for tags.

 

Manipulating Redux Store

Open resources/js/admin/store/actionTypes/TagTypes.js, add the below code:

The above file represent the action types we will use with tags as you learned in previous part when we process categories that we need unique action types defined as constants so that we can update state in the reducer.

Now open resources/js/admin/store/actions/TagActions.js and update it with the below code:

In the above code i added all the actions needed like listTags, addTag, editTag, etc. Note that action types and actions is much the same as those in categories.

 

After we defined the actions we need to update the reducer so that it can trigger state updates based on action type. To do this open resources/js/admin/store/reducers/TagReducer.js and update it like this:

Here as we did with categories by checking for action type in switch statement then updating the related state accordingly.

To finish the final piece of the redux store we need to update the root reducer so that the app can recognize the new state object.

Update resources/js/admin/store/reducers/RootReducer.js as shown:

Here we added an alias for tag reducer which is tag so i can access the tags in components like this ‘this.props.tag‘.



Updating Components

List All Tags

Open resources/js/admin/components/pages/tags/Index.js and update with this code:

resources/js/admin/components/pages/tags/Row.js

As you see in the above code i used connect() the utility function in react redux to map state to props and map dispatch to props. Then in the component i can access those as normal props, for example in the componentDidMount() lifecycle hook i called this.props.setTagDefaults() to reset some state variables, add this.props.listTags(1) so that we can fetch the first page of tags from the server.

Also in the render() function we looped tags using javascript map() function which return a new <Row /> component passing in a single tag as a prop. In The <Row /> component we can delete tags by calling this.props.deleteTag().



Creating Tags

To create new tags update resources/js/admin/components/pages/tags/Add.js with this code:



Create this file resources/js/admin/components/pages/tags/TagForm.js and add this code:

 

Updating Tags

Open resources/js/admin/components/pages/tags/Edit.js and update it with this code:

Now let’s try that this is working in terminal run

 

 

Continue to part7: Admin Posts

 

Share this: