187
rated 0 times
[
189]
[
2]
/ answers: 1 / hits: 5240
/ 4 Years ago, sat, june 13, 2020, 12:00:00
I am using createAsyncThunk API from Redux Toolkit when fetching notes data from Google Firebase which stores in collection notes
In notebookSlice.js I define the functional thunk and slice
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
const firebase = require('firebase');
export const fetchNotes = createAsyncThunk(
'users/fetchNotes',
async () => {
firebase.firestore().collection('notes').get()
.then((snapshot) => {
var data = [];
snapshot.forEach((doc) => {
data.push({
title: doc.data().title,
body: doc.data().body,
id: doc.id
})
});
console.log(data); // not null
return data;
})
.catch((err) => {
console.log(err)
});
}
)
export const notebookSlice = createSlice({
name: 'notebook',
initialState: {
selectedNoteIndex: null,
selectedNote: null,
notes: null,
count: 3,
loadingNotes: false,
error: null
},
reducers: {
...
},
extraReducers: {
[fetchNotes.pending]: (state, action) => {
if (state.loadingNotes === false) {
state.loadingNotes = true
}
},
[fetchNotes.fulfilled]: (state, action) => {
if (state.loadingNotes === true) {
state.notes = action.payload;
console.log(action.payload); // null
state.loadingNotes = false;
}
},
[fetchNotes.rejected]: (state, action) => {
if (state.loadingNotes === true) {
state.loadingNotes = false;
state.error = action.payload;
}
}
}
And I use them in component sidebar.js
import React, {useState, useEffect} from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchNotes } from './notebookSlice';
export function Sidebar(props) {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchNotes());
})
return (
...
)
}
I am pretty sure that I get complete data from the thunk function but the state.notes remains null after fetching the data with a final fulfilled status. What's wrong with my code?
More From » reactjs
