SwiftUI Keeping data up to date across views and view models

Question

I come from a react-native background and I am having trouble understanding a specific part of MVVM in SwiftUI: having multiple views of the same entities.

I am building a simple social media app with posts. These posts can be viewed on the Homepage, and on the Profile page of any user.

This is what the view models look like

struct HomepagePosts: ObservableObject {
  @Published var posts = [Post]()

  ... rest of logic
}

struct ProfilePosts: ObservableObject {
  @Published var posts = [Post]()

  ... rest of logic
}

My problem is the following. If a user just posted a post, that post will show up on the homepage and on his profile. What if the user decides to update the post? How will the post be updated in all places?

In React this is done by normalizing state. Instead of keeping separate posts arrays, you keep 2 arrays of postIds, and one dictionary with the postId as key and the entire Post object as the value. That way, updating the post updates it in one place, and every view updates directly.

How do you do this in SwiftUI?

Answer 1

Here's some code to illustrate the comment above. I believe you want to structure it something like this, with only one model object.

struct Post: Identifiable {
  let id: String
  let text: String
}

class Model: ObservableObject {
  @Published var posts: [Post] = []
}

@main
struct TestApp: App {
  // @StateObject var model = Model()
  var body: some Scene {
    WindowGroup {
      Homepage()
       // .environmentObject(model)
    }
  }
}

struct Homepage: View {
  // @EnvironmentObject var model: Model
  @StateObject var model = Model() // holds array of homepage posts
  @State private var newPost: String = ""
  @State private var showProfile = false
  var body: some View {
    VStack {
      TextField("new post", text: $newPost) { _ in
      } onCommit: {
        model.posts.append(Post(id: UUID().uuidString, text: newPost))
        newPost = ""
      }
      Divider()
      ScrollView {
        ForEach(model.posts) { post in
          Text(post.text).padding()
        }
      }
      Divider()
      Button("Profile") {
        showProfile = true
      }
      .sheet(isPresented: $showProfile) {
        Profile()
      }
    }
    .padding()
  }
}

struct Profile: View {
  // @EnvironmentObject var model: Model
  @StateObject var model = Model() // holds array of profile posts
  var body: some View {
    Text("You have \(model.posts.count) posts")
  }
}