React-three-fiber redux dispatch resets scene

Questions
1

I’ve noticed that when I use redux dispatch it causes the entire Threejs scene to reset. I created a button to change the text within a Text component. Is there a way to get around this?

Main Page

const { appState } = bindActionCreators(actions, dispatch)

const handleText = async () => {
  const extx = 'Example Text Loaded!'
  await appState({...rstate.main, extx})
}

<ReactReduxContext.Consumer>
  {({ store }) => 
    <Canvas style={{ background: 'black'}} pixelRatio={window.devicePixelRatio}>
      <Provider store={store}>
        <Controls />
        <ambientLight intensity={0.1} />
        <directionalLight color="white" position={[-5, 0, -5]} />
        <primitive object={new THREE.AxesHelper(10)} />
        <Box />
        <Card />
        <TextExample />
        <Actions />
      </Provider>
    </Canvas>
  }
</ReactReduxContext.Consumer>

Text component

'use strict'

import React from 'react'
import { useFrame } from '@react-three/fiber'
import { Text } from '@react-three/drei'
import * as THREE from 'three'

import { useSelector, useDispatch, Provider, ReactReduxContext } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '../../store/actions'

const textProps = {
  fontSize: 3.9,
  font: 'https://fonts.gstatic.com/s/modak/v5/EJRYQgs1XtIEskMA-hI.woff'
}

const TextExample = (props) => {
  const rstate = useSelector(rstate => rstate)

  return (
    <Text depthText={false} {...textProps}>{rstate.main.extext || 'Hello!'}</Text>
  )
}

export default TextExample
2

imo this

<Foo>
  {() => <...>}
</Foo>

is better expressed with useContext. most likely it’s the render prop that causes the everything in it to loose lifecycles. i don’t know how redux works, but it could well be that that’s your problem.