Building a Blog With Reactjs And Laravel Admin Users

Building a Blog With Reactjs And Laravel Part9: Admin Users

In this article of this series i will implement and finish the users CRUD to the React admin panel to enable admin to create, update and delete users.

 

 

 

Continuing from the previous article when we finished comments, in this tutorial i will take the same approach like we did in previous tutorials to finish users CRUD without going into too much details so at first create api file User.js in resources/js/admin/apis/

resources/js/admin/apis/User.js

This is the api file for users, next let’s add the store.

 

Preparing Store

Open resources/js/admin/store/actionTypes/UserTypes.js and add this code:

The above code is the action types for users to deal with every action and to enable us to manipulate the reducer.

Redux Actions

Update resources/js/admin/store/actions/UserActions.js with this code:

 

Redux Reducer

Update resources/js/admin/store/reducers/UserReducer.js with this code:



Then update the root reducer to include the user store in resources/js/admin/store/reducers/RootReducer.js

Now we can access users using props using this.props.user.<property>. In the next we will update components to reflect the new state object in user components.

 

Updating Components

Displaying & removing users

Open and update resources/js/admin/components/pages/users/Index.js

Create resources/js/admin/components/pages/users/Row.js with this code:



Creating users

Update resources/js/admin/components/pages/users/Add.js

Updating users

Update resources/js/admin/components/pages/users/Edit.js



Create partial component resources/js/admin/components/pages/users/UserForm.js with the below code:

Now in the command line terminal run

Login and reload the page you should see the users when navigating to it.

 

 

Continue to part10: Admin Finish

 

 

Share this: