Click here to Skip to main content
15,867,835 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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.

TypeScript
<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?

TypeScript
const[buttonMessage, setButtonMessage] = useState('hello world');

<Button id='generateButton' 
	type="primary"
	onClick={setButtonMessage('Foo')}>
	{buttonMessage}
</Button>
Posted
Updated 25-Oct-22 22:45pm
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900