react-native - React Native Workflow，处理 429 错误和数据

Question

我在这里寻找一些指导，我正在使用 redux 开发一个 RN 应用程序，每次我在应用程序上进入一个新屏幕时，我的 useEffect() 中肯定有一个“callinitialData”函数，使用 axios 获取 api 数据到被 dispatch() 到 redux 状态。

一切正常，但是每当我从一个屏幕跳到另一个屏幕时，有时我会收到很多请求的 429 错误，所以我只是设置了 redux-persist 希望这将有助于减少请求量，在我看来，如果我的 api数据等于我的本地数据，不需要提出该请求。

但是它保持不变，所以我在想最好的方法是什么，登录时尝试一次获取所有数据>将其存储在 asyncstorage 和 redux 中，然后在每个屏幕上获取它？

那么，如果我在登录时获取所有数据，我将如何能够实时从 api 接收新数据集？

---

应用功能 -

1. 编辑个人资料（img、pass、email、name）
2. 数据表格（请求 X、提交数据、编辑表格）
3. 通过联系人聊天/创建群聊

代码示例

const ChatScreen = ({  auth: { user }, getChatContacts, chat: { contacts }, navigation }) => {
  useEffect(() => {
    getChatContacts();
  }, []);

  const onChatUser = async (_id, name, roomID) => {
    console.log(_id, name, roomID,  contacts.payload.clone)
    navigation.navigate( "Message", {
      _id, name, chatRoomId: roomID, allUsers: contacts.payload.clone
    });

  }

  const renderItem = ({ item , index }  ) => {
    let userName = "";
    item.users.map((users, index) => {
        let idToCheck = users.toString() !== user._id.toString() ? users : false;

        if (idToCheck) {
         let getOneUser = contacts.payload.clone.find(x => x._id === idToCheck);

          userName += "" + getOneUser.name + ", ";
        }
    })

    return (<TouchableOpacity key={item._id} onPress={() => onChatUser(item._id, item.name, item.roomID)}>
      <View style={styles.chatContainer}>
        <FontAwesome name="user-circle-o" size={50} color="#000000"/>
        <Text style={styles.chatTitle}>{ ((userName).length > 32) ?
            (((userName).substring(0,32-3)) + '...') :
            userName }</Text>
        <FontAwesome name="angle-right" size={25} color="#000000"/>
      </View>
    </TouchableOpacity>)
  };

  return (
      <SafeAreaView style={styles.container}>
        <TextInput
            autoCapitalize="none"
            autoCorrect={false}
            clearButtonMode="always"
            placeholder="Search friend"
            style={styles.chatsearch}
        />

        {contacts ?
          (<FlatList
              data={contacts.payload.allContact}
              renderItem={(item, index) => renderItem(item, index)}
              keyExtractor={item => item.id}
              style={styles.FlatListContainer}
          />) : (<Text style={styles.FlatListContainer}></Text>)
        }

      </SafeAreaView>
  );
}

const styles = StyleSheet.create({});

ChatScreen.propTypes = {
  isAuthenticated: PropTypes.bool,
  auth: PropTypes.object,

};

const mapStateProps = state => ({
  auth: state.auth,
  chat: state.chat
});

export default  connect(mapStateProps, {getChatContacts} )(ChatScreen);

 

还原动作

export const getChatContacts = () => async dispatch => {
    const config = {
        header: {
            "Content-Type": "application/json"
        }
    }
    try  {
        const res = await axios.get(API_LINK +"/users/getChatContacts",);


        dispatch({
            type:  GET_CONTACT_CHAT,
            payload: res.data
        });

    }  catch (err){
        console.log(err)
        dispatch({
            type:  ERROR_FAMILY_PARENT,
            payload: { msg: err.response, status: err.response}
        });
    }
};

标签： react-nativereduxaxiosreact-navigation