State nested in array not updating reactively?

[lkdm]

Hi all, thanks again for all your help understanding Zustand.

I have a dynamically built Zustand store, and I'm trying to update an attribute of each array from the response of an API call.

The problem I am having is that service[id].status and service[id].isLoading are not updating reactively-- they are not triggering a re-render when they are updated.

Am I using useEffect wrong somehow? Do I need to use subscribe middleware? Or am I using Zustand wrong somehow?

Item component:

const StatusIndicator = ({...props}) => {
    // Grab the state of the connection.
    const state = useStore(
        useCallback(
            // Use id, because "key" does not get passed to the component.
            state => state.services[props.id], [props.id]
        )
    )
    const actions = useStore(state => state.actions)
    
    useEffect(() => {
        dispatchRequest(state.endpoint).then((response) => {
            // Set state
            actions.updateStatus(props.id, response)
            actions.setLoading(props.id, false)

            // Testing
            console.log(state.name, ": (reponse) ", response)
            console.log(state.name, ": (state) ", state.isConnected)
        })
    }, [])

    return(
        <ListGroup.Item className="d-flex justify-content-between align-items-start">
            <div className="me-auto">
            <div className="fw-bold">{props.role}</div>
                {props.service}
            </div>
            {state.isLoading
                ? showStatus("connecting")
                : showStatus(
                    state.isConnected ? "connected" : "not connected"
                )}
        </ListGroup.Item>
    )
}

export default StatusIndicator

List component:

const CONNECTIONS: Array<IConnectionStatus> = [
  {name: "Cloudflare", role: "Content Delivery Network", endpoint: "cdn", isConnected: false, isLoading: true},
  {name: "Core API", role: "Core API Provider", endpoint: "core_api", isConnected: false, isLoading: true},
  {name: "Amazon Cognito", role: "Authorisation Provider", endpoint: "amazon_cognito", isConnected: false, isLoading: true}
]


const ConnectionList = ({...props}) => {
 
    return(
        <ListGroup variant="flush">
          <Provider key={"store"} createStore={() => createStore(CONNECTIONS)}>
            {CONNECTIONS.map((item, i) => <StatusIndicator
                  key={i}
                  id={i}
                  service={item.name}
                  role={item.role}
                  response={item.endpoint}
                  />)}
          </Provider>
        </ListGroup>
    )
}

export default ConnectionList

Zustand Store:

// Create a Context provider
export const { Provider, useStore } = createContext<IConnectionStatusState>();

export const createStore = (initialServices: Array<IConnectionStatus>) => 
  create<IConnectionStatusState>((set) => ({
    services: initialServices,
    actions: {
        updateStatus: (_id: number, _value: boolean) =>
            set((state) => ({
                ...state,
                [_id] : {status: _value}
            })),
        setLoading: (_id: number, _value: boolean) =>
            set((state) => ({
                ...state,
                [_id] : {isLoading: _value}
            }))
    },
}));

[dai-shi]

  set((state) => ({
    ...state,
    [_id] : {status: _value}
  })),

☝️ that should be something like this 👇 ?

  set((state) => {
    const services = [...state.services] // copy the array
    services[_id] = {status: _value}
    return { services }
  }),

[lkdm]

Thank you! I had no idea you could set something by returning to the set() function. I've been calling a second set method within it the entire time (facepalm).

I'm still having an issue where state.isLoading does not update in the React DOM. It worked fine for me when I was not using Zustand/context (made isLoading its own Zustand store for a particular page). Is this an issue with my implementation?

[lkdm]

Fixed: The issue is that the DOM does not update on nested state changes (I'm not sure how to change this).

To fix this issue, I defined a constant from my nested part of state.

const isLoading = useStore(state => state.services[props.id].isLoading)

In this case, isLoading.

[dai-shi]

I had no idea you could set something by returning to the set() function.

It's a simplified version with copy-and-mutate pattern.
Another method would be like:

  set((state) => ({
    services: [
      ...state.services.slice(0, _id),
      {status: _value},
      ...state.services.slice(_id + 1),
    ],
  })),

[lkdm]

Phenomenal, thank you for your help @dai-shi!