OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

React component not rendering after store.dispatch()

  • Thread starter Thread starter Meg
  • Start date Start date
M

Meg

Guest
So I have a Componenet Financials.tsx

which renders- <ActionPane props={fsActionPane.actionProps} />

and fsActionPane= useSelector((state: State) => state.fsActionsReducer);

and contains a useEffect-

Code:
 useEffect(() => {
 FinancialsUtility.setPropsForLockUnlockPane();
    }, [
      fsActionPane.type])

FinancialsUtility.setPropsForLockUnlockPane(); this function internally sets fsActionPane.actionProps being send to ActionPane.

there is on button UI somewhere in the code which changes fsActionPane.type

FinancialsUtility.tsx is a static class --

and this function setPropsForLockUnlockPane() function conatins many fields that needs to be rendererd by

for eg-

Code:
{
                type: TOGGLE_WITH_HEADING,
                fieldProps: {
                  onChange: async (e, value) => {
                    debugger
                    await store.dispatch(setSelectedSheets(value))
                  },
                  toggleOp: sheets,
                  value: fsActionPaneState.selectedSheets,
                  toggleStyling: {
                    width: '8rem'
                  },
                  heading: {
                    name: 'Select Sheets',
                    btn: {
                      name: 'Select All Sheets',
                      onClick: async () => {
                        // if selected sheets length is equal to sheets options length then deselect all
                        if (fsActionPaneState.selectedSheets.length === sheets.length) await store.dispatch(setSelectedSheets([]))
                        else await store.dispatch(setSelectedSheets(sheets))
                      }
                    }
                  }
                }
      
              }

the field componenet that this object renders is---

Code:
 getToggleWithHeading=(params)=> {
        let toggleOptions: any = [];
        params?.toggleOp?.forEach((key) => {
            toggleOptions.push({ key: key, value: key });
        })
        return <div className="actionPaneToggleWithHeading" data-testid='TestactionPaneToggleWithHeading'>
            <div className="actionPaneToggleHeading">
                <div className='actionPaneToggleHeadingLeft'>{params?.heading?.name}</div>
                <IvpButton name={params?.heading?.btn?.name}
                    variant='text'
                    onClick={params?.heading?.btn?.onClick}
                    color="IvpButtonPrimary"
                    fontColor="#4981d1" />
            </div>
            <IvpToggle
                variant='IvpToggleButtonSet'
                value={params?.value}
                toggleOptions={toggleOptions}
                onChange={params?.onChange}
                toggleButtonDefaultForegroundColor={'#6e7198'}

                toggleButtonSelectedBackgroundColor={'#898fbd'}
                toggleButtonSelectedForegroundColor={'#ffffff'}
                
                toggleButtonHoverBackgroundColor={'#dfe1f0'}
                toggleButtonHoverForegroundColor={'#585b85'}
                toggleStyling={params.toggleStyling}

                borderRadius={'5px'}
            />
        </div>

    }

Now the issue is-

onChange: async (e, value) => { debugger await store.dispatch(setSelectedSheets(value)) },

this onchange sets selectedSheets present in reducer but does not re-render the component. It does re-renders but before it has set the property in reducer. not after. I even added async await still not re-rendering.

Can somebody please help me with this one? Also if you feel my way of doing this is very complicated please help me out with another way.

************** little back story about the component *********************

So this is a generic parent componenet which has 3 child components under it being rendererd following a factory pattern. If 'type' is 'Lock' or 'Unlock' then ActionPane /> internally renders <LockUnLockRenderer /> so type is generated at runtime by user hence kept it in reducer.

I feel the issue can be that the function in FinancialsUtility that sets the props, might needs to be called again after setting the sheets value? but can i do it?

<p>So I have a Componenet Financials.tsx</p>
<p>which renders-
<code> <ActionPane props={fsActionPane.actionProps} /></code></p>
<p>and <code>fsActionPane= useSelector((state: State) => state.fsActionsReducer);</code></p>
<p>and contains a useEffect-</p>
<pre><code> useEffect(() => {
FinancialsUtility.setPropsForLockUnlockPane();
}, [
fsActionPane.type])
</code></pre>
<p><code>FinancialsUtility.setPropsForLockUnlockPane();</code> this function internally sets fsActionPane.actionProps being send to ActionPane.</p>
<p>there is on button UI somewhere in the code which changes fsActionPane.type</p>
<p>FinancialsUtility.tsx is a static class --</p>
<p>and this function setPropsForLockUnlockPane() function conatins many fields that needs to be rendererd by </p>
<p>for eg-</p>
<pre><code>{
type: TOGGLE_WITH_HEADING,
fieldProps: {
onChange: async (e, value) => {
debugger
await store.dispatch(setSelectedSheets(value))
},
toggleOp: sheets,
value: fsActionPaneState.selectedSheets,
toggleStyling: {
width: '8rem'
},
heading: {
name: 'Select Sheets',
btn: {
name: 'Select All Sheets',
onClick: async () => {
// if selected sheets length is equal to sheets options length then deselect all
if (fsActionPaneState.selectedSheets.length === sheets.length) await store.dispatch(setSelectedSheets([]))
else await store.dispatch(setSelectedSheets(sheets))
}
}
}
}

}
</code></pre>
<p>the field componenet that this object renders is---</p>
<pre><code> getToggleWithHeading=(params)=> {
let toggleOptions: any = [];
params?.toggleOp?.forEach((key) => {
toggleOptions.push({ key: key, value: key });
})
return <div className="actionPaneToggleWithHeading" data-testid='TestactionPaneToggleWithHeading'>
<div className="actionPaneToggleHeading">
<div className='actionPaneToggleHeadingLeft'>{params?.heading?.name}</div>
<IvpButton name={params?.heading?.btn?.name}
variant='text'
onClick={params?.heading?.btn?.onClick}
color="IvpButtonPrimary"
fontColor="#4981d1" />
</div>
<IvpToggle
variant='IvpToggleButtonSet'
value={params?.value}
toggleOptions={toggleOptions}
onChange={params?.onChange}
toggleButtonDefaultForegroundColor={'#6e7198'}

toggleButtonSelectedBackgroundColor={'#898fbd'}
toggleButtonSelectedForegroundColor={'#ffffff'}

toggleButtonHoverBackgroundColor={'#dfe1f0'}
toggleButtonHoverForegroundColor={'#585b85'}
toggleStyling={params.toggleStyling}

borderRadius={'5px'}
/>
</div>

}
</code></pre>
<p>Now the issue is-</p>
<p>onChange: async (e, value) => {
debugger
await store.dispatch(setSelectedSheets(value))
},</p>
<p>this onchange sets selectedSheets present in reducer but does not re-render the component.
It does re-renders but before it has set the property in reducer. not after. I even added async await still not re-rendering.</p>
<p>Can somebody please help me with this one? Also if you feel my way of doing this is very complicated please help me out with another way.</p>
<p>************** little back story about the component *********************</p>
<p>So this is a generic parent componenet which has 3 child components under it being rendererd following a factory pattern. If 'type' is 'Lock' or 'Unlock' then ActionPane /> internally renders <code><LockUnLockRenderer /> </code>
so type is generated at runtime by user hence kept it in reducer.</p>
<p>I feel the issue can be that the function in FinancialsUtility that sets the props, might needs to be called again after setting the sheets value? but can i do it?</p>
 

Latest posts

Top