React Redux – Firebase CRUD Operations example

In this tutorial, we’re gonna do CRUD operations with Firebase Realtime Database in a React Redux Application.

Related Article: How to use Firebase Database CRUD Operations in React Webpack

Async Redux Action

Overview

We have known how the Redux works with Action creators:
– A Component calls an Action creator.
– That creator returns an Object with type field.
– The Component dispatches the Object.
– Redux store changes.

With Async Redux Action:
– A Component calls an Action creator.
– That creator returns a Function instead of an Action object.
– The Component dispatches the Function.
– The Function runs. It can have side effects with asynchronous API calls or dispatch Actions.

This Function will get executed by the Redux Thunk middleware from package called redux-thunk.

Redux Thunk

Redux Thunk middleware allows us to write Action creators that return a function instead of an action.
So we can:
– perform asynchronous dispatch:

– or perform conditional dispatch:

The inner function receives the store dispatch() and getState() methods as parameters.
Then, we must enable Redux Thunk using applyMiddleware() function:

Example Overview

Goal

We will build a React Redux Application that can do CRUD Operations with Firebase Realtime Database:

react-redux-firebase-crud-example-goal

Technologies

– React 16.3.0
– Redux 3.7.2
– React Redux 5.0.7
– Webpack 4.4.1
– Firebase 4.13.1
– Redux Thunk 2.2.0

Project Structure

react-redux-firebase-crud-example-structure

Practice

Setup React Application with Firebase Database

Please visit How to add Firebase to React App.

react-redux-firebase-add-firebase-webapp-config

firebase/firebase.js

Redux Actions

We create, read, update, delete Book item with database object.
For more details, please visit: Firebase Database CRUD Operations.

actions/books.js

actions/filters.js

Redux Reducers

reducers/books.js

reducers/filters.js

React Store

store/store.js

Filter & Sort function

selectors/books.js

React Components
Data Model

components/Book.js

Show Item List

components/DashBoard.js

components/BookFilters.js

components/BookList.js

Add & Edit Item

components/AddBook.js

components/EditBook.js

components/BookForm.js

React Router

routers/AppRouter.js

components/Header.js

app.js

Source Code

ReactReduxFirebase

For running:
yarn install
yarn run dev-server or yarn run build, then yarn run serve.

By grokonez | April 26, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*