React Native中如何搭配Context Provider使用AsyncStorage实现数据持久化

核心问题梳理 #

1. Context传递的state是async函数返回的Promise对象，而非响应式的reducer状态，导致组件无法实时监听状态更新，必须取私有属性_W才能拿到值，是导航回页面不刷新的核心原因。
2. 没有在Provider初始化时从AsyncStorage读取持久化数据同步到reducer，重启应用后状态重置，没有实现真正的持久化。
3. 存储逻辑直接写在组件渲染顶层，会无意义频繁触发存储操作。

修复代码 #

1. 修改teams reducer，新增初始化状态分支

const teamsReducer = (state, action) => {
  switch (action.type) {
    // 新增初始化状态逻辑
    case 'init_state':
      return action.payload;
    case 'edit_team' :
      return state.map((team) => {
        return team.id === action.payload.id ? 
        action.payload
        : 
        team
      });
    case 'delete_team':
      return state.filter(team => team.id !== action.payload)
    case 'add_team':
      return [
        ...state, 
        { 
          id: uuid.v4(), 
          name: action.payload.name,
          content: action.payload.content
        }
      ];
    default:
      return state;
  }
};

2. 重写createDataContext逻辑

import React, { useEffect, useReducer } from 'react';
import AsyncStorage from '@react-native-async-storage/async-storage';

export default (reducer, actions, initialState) => {
  const Context = React.createContext();

  const Provider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, initialState);

    // 监听state变化，自动同步到本地存储
    useEffect(() => {
      const storeData = async (value) => {
        try {
          const jsonValue = JSON.stringify(value)
          await AsyncStorage.setItem('@storage_Key', jsonValue)
        } catch (e) {
          console.error('存储失败:', e)
        }
      }
      storeData(state)
    }, [state])

    // 应用初始化时读取本地存储数据同步到state
    useEffect(() => {
      const getData = async () => {
        try {
          const jsonValue = await AsyncStorage.getItem('@storage_Key')
          if (jsonValue != null) {
            const storedData = JSON.parse(jsonValue)
            dispatch({ type: 'init_state', payload: storedData })
          }
        } catch(e) {
          console.error('读取存储失败:', e)
        }
      }
      getData()
    }, [])

    const boundActions ={};
    for (let key in actions) {
      boundActions[key] = actions[key](dispatch)
    }

    // 传递响应式的reducer状态，不要返回Promise
    return <Context.Provider value={{ state, ...boundActions }}>{children}</Context.Provider>
  };

  return { Context, Provider };
};

3. 修改队伍展示页的FlatList数据源

移除对Promise私有属性_W的引用，直接使用state作为数据源：

const showTeams = useCallback((el) => {
  console.log(el);
  return <FlatList 
    horizontal={false}
    data={el}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => {
      if (item.id !== 0) {
        return (
          <Pressable onPress={() => props.navigation.navigate('Team Detail', { id: item.id, results: item.content, name: item.name })}>
            <ViewTeams results={item} id={item.id} height={'auto'} width={'100%'} />
          </Pressable>
        )
      } else return null
    }}
  />
}, [state])

修复效果 #

1. 状态更新后自动同步到AsyncStorage，应用重启也能读取到之前存储的队伍数据，实现真正的持久化。
2. Context传递响应式状态，创建队伍后导航回展示页会自动刷新渲染，无需切换首页再进入。

内容的提问来源于stack exchange，提问作者Scotch