I have a
React
site that makes use of
Typescript
and
Redux
to handle the state.
I have found that if I call the dispatcher to update the state via
Redux
that the state is updated(I can see this via dev tools) but
React
does not pick up the changed value and refresh it in the
DOM
.
So a code snippet example below renders a button with the button text set to the value that is retrieved from
selector.buttonMessage
.
GeneratingFiles(true)
calls the dispatcher to update the
buttonMessage
in state.
When the button is clicked
GeneratingFiles(true)
is called, the state is updated via the relevant
Redux
dispatcher and the button should display the newly updated
buttonMessage
in state, but the
DOM
is not updated with this new value.
<Button id='generateButton'
type="primary"
onClick={
async () => {
await GeneratingFiles(true);
}
}>
{selector.buttonMessage}
</Button>
What I have tried:
If I make use of the
useState
functionality available for the view I find that any updates made to
buttonMessage
via
setButtonMessage
are reflected on the page i.e. when an update is made the button component updates to show the new string.
So while this is a solution I would rather handle all of state via
Redux
.
So I think my question is around the area of how do I determine what is preventing
React
from updating the
DOM
?
const[buttonMessage, setButtonMessage] = useState('hello world');
<Button id='generateButton'
type="primary"
onClick={setButtonMessage('Foo')}>
{buttonMessage}
</Button>