Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6287

Store notes with Async Storage in React Native

$
0
0

I'm developing a Notes App and I want to save the notes in the device's memory. I'm using Async Storage, but without success. I create notes and they are displayed correctly until I reload the app, and they're gone.

Here is the logic to save and retrieve the notes with Async Storage:

async function saveNotes() {    try {      const jsonValue = JSON.stringify(notes)      await AsyncStorage.setItem('@notesApp' ,jsonValue)    }    catch(e){      alert(e)    }  }  async function getNotes() {    try {      const value = await AsyncStorage.getItem('@notesApp')      if(value !== null){        const notesJson = JSON.parse(value)        notesJson.map((item: INotes) => {          dispatch(getId(Number(item.id)))          dispatch(titlePicker(item.title))          dispatch(notePicker(item.note))          dispatch(addNote())        })      }    }    catch(e) {      alert(e)    }  }  useEffect(() => {    saveNotes()  }, [notes])  useEffect(() => {    getNotes()  }, [])

And here's the code of my reducers:

import { createSlice, PayloadAction } from "@reduxjs/toolkit"export interface INotes {  id: number,  title: string,  note: string,}const initialState = {  noteId: 0,  noteTitle: '',  noteContent: '',  notes: [] as INotes[],}export const notePickerSlice = createSlice({  name: 'notePicker',  initialState,  reducers: {    idPicker: (state) => {      state.noteId++    },    getId: (state, action: PayloadAction<number>) => {      state.noteId = action.payload    },    titlePicker: (state, action: PayloadAction<string>) => {      state.noteTitle = action.payload    },    notePicker: (state, action: PayloadAction<string>) => {      state.noteContent = action.payload    },    addNote: (state) => {      state.notes = [        ...state.notes,        {          id: state.noteId,          title: state.noteTitle,          note: state.noteContent,        }      ]    },    updateNote: (state, action: PayloadAction<number>) => {      state.notes[action.payload - 1].title = state.noteTitle      state.notes[action.payload - 1].note = state.noteContent    },  }})export const { getId, updateNote, addNote, idPicker, titlePicker, notePicker } = notePickerSlice.actionsexport default notePickerSlice.reducer

The github repo: (https://github.com/victorcff/Notes-App)

I don't understand why this is not working. Can someone help me?


Viewing all articles
Browse latest Browse all 6287

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>