Data not saved with redux react for android

I probably missunderstood how does redux works but my datas are not saved into the store and i quit et re-open the app. Everything works perfectly when i keep my app open (I can add sessions, exercices…) and everything is saved but when i close it there’s no data. Do i’ve to write some code to receive the store data ? Here’s my code : Home.js (home page) :

import React from 'react'
import { FlatList, View, Text, TouchableOpacity, StyleSheet } from 'react-native'
import Session from './Session'
import { connect } from 'react-redux'
import GlobalStyle from '../helpers/GlobalStyle'

class Home extends React.Component {

    constructor(props) {
        super(props)
    }

    _displaySessionDetails = (idSession) => {
        this.props.navigation.navigate("SessionDetails", { 
            session: this._filterItems(idSession, this.props.globalSessions), 
        })
    }

    _filterItems = (recherche, enssemble) => {
        return enssemble.find(item => item.id == recherche);
    }

    _addSession = () => {
        this.props.navigation.navigate("NewSession")
    }

    render() {
        return (
            <View style={[styles.container, GlobalStyle.container]}>
                <FlatList
                    data={ this.props.globalSessions }
                    keyExtractor={(item) => item.id.toString()}
                    renderItem={({item}) => <Session session={item} displayDetailsForSession={ this._displaySessionDetails } />}
                />
                <TouchableOpacity style={GlobalStyle.bottom_btn} onPress={() => { this._addSession() }}>
                    <Text style={GlobalStyle.bottom_btn_content}>+</Text>
                </TouchableOpacity>
            </View>
        )
    }
}  

const mapStateToProps = (state) => {
    return {
        globalSessions: state.globalSessions
    }
}
  
export default connect(mapStateToProps)(Home)

ConfigureStore.js :

import { createStore } from 'redux'
import reducerSession from './Reducer/ReducerSession'

export default createStore(reducerSession)

ReducerSession.js :

 const initialState = { globalSessions: [] }

function reducerSession (state = initialState, action) {
    let nextState
    switch(action.type) {
        case 'ADD_SESSION':
            console.log("Add session")
            nextState = {
                ...state,
                globalSessions: [...state.globalSessions, action.value]
            }
            return nextState || state
        case 'UPDATE_SESSION':
            if(action.subtype == 'ADD_EXERCICE') {
                console.log("Add exercice : " + action.value.exercice.repetition + " x " + action.value.exercice.title)
                nextState = {
                    ...state,
                    globalSessions: [...state.globalSessions]
                }
                let session = nextState.globalSessions.find((item) => item.id == action.value.id)
                session.exercices.push(action.value.exercice)
            } else if(action.subtype == 'DELETE_EXERCICE') {
                console.log("Delete exercice (session: " + action.value.idSession + ", exo: " + action.value.idExo + ")")
                nextState = {
                    ...state,
                    globalSessions: [...state.globalSessions]
                }
                let session = nextState.globalSessions.find((item) => item.id == action.value.idSession)
                session.exercices = session.exercices.filter((item) => item.id != action.value.idExo)
            }
            return nextState || state
        case 'DELETE_SESSION':
            console.log("Delete session")
            nextState = {
                ...state,
                globalSessions: [...state.globalSessions.filter((item) => item.id != action.value.id)]
            }
            return nextState || state
        default: 
            return state
    }
}

export default reducerSession

and app.js :

import React from 'react'
import Navigation from './navigation/Navigation'
import { StatusBar } from 'react-native'
import { Provider } from 'react-redux'
import Store from './Store/configureStore'

export default function App() {
  return (
    <Provider store={Store}>
      <StatusBar  translucent backgroundColor="transparent" barStyle='light-content' />
      <Navigation />
    </Provider>
  )
}

Every should be there, i hope i did not forget some code. Thank you for helping 🙂

Answer

Redux is an in-memory store, by default it does not persist it’s data anywhere, which means it will start from zero after you reopen your app.

You probably want to add something like redux-persist for saving & loading the state to your device.

Advertisement

Answer