未使用 redux 保存的数据 react for android

Question

我可能误解了 redux 的工作原理，但我的数据没有保存到商店中，我退出并重新打开应用程序。当我保持我的应用程序打开时一切正常（我可以添加会话，练习......）并且所有内容都保存了但是当我关闭它时没有数据。我是否必须编写一些代码来接收存储数据？ 这是我的代码： Home.js（主页）：

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

和 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>
  )
}

每个都应该在那里，我希望我没有忘记一些代码。 谢谢你的帮助:)

Answer 1

Redux 是一个内存存储，默认情况下它不会将其数据持久化到任何地方，这意味着它会在您重新打开应用后从零开始。

您可能想要添加类似redux-persist 的内容来保存和加载状态到您的设备。

Answer 2

如果你想弄清楚如何在会话之间存储状态，也许 Redux 文档的"Sending Data with Thunks" section 会有所帮助。它是教程的一部分，可以让您很好地了解如何将异步 API 调用与 reducer 集成。