Replace reducer incorrect store state

[vklch]

Description

Case: replace reducer when specific props changes.

Case description:

• Parent component pass props to child
• Child attach reducer (with props from parent) into store in useLayoutEffect

What is the current behavior?

When child receives a new prop from parent a new reducer attached to store but store has previous state.

Steps to Reproduce

I've created example to demonstrate behaviour (https://codesandbox.io/s/priceless-rgb-c9hdw8).

What is the expected behavior?

In this case I expect to see a new value rendered on screen when user changes value in dropdown.

[markerikson]

I'm not sure I'm following what the expected behavior is here. Could you give me a step-by-step bullet point list of what should happen and what you're expecting to see?

[ghost]

Yep, of course. If speak precisely behaviour of this example is used in application builder. So there is a settings layer (in our case Wrapper) that provides some props to underlying components (result components of the page) and each of these underlying components are connected to redux store. All props from parent components are settings for underlying components and should be stored in redux store. This case should work as follows:

• Child components (connected to store) receives props from redux store;
• Parent component has ability to pass some settings (props) to child
• These passed props should update props in the store for child compoent (but to do so we need to replace existing reducer with props from parent component)
• Child component re-renders when props from store changes.

---

• Wrapper component has dropdown that changes value prop
• Child component also has value prop but receives it from redux store
• When user change dropdown value in parent component (Wrapper) value prop in redux store should be updated
• Child component should display actual value

[luizfm]

Can't you return the value that you're receiving as prop instead of pass the useSelector? 🤔

You might not have your state up to date when you're trying to get that value, since it might be asynchronous. So, you're updating your state but you're returning the old state value because it didn't finish to update the state when you first try to return that value.

[markerikson]

I'm poking at the CSB and adding some logging to the useSelector call. I can see the selector running and eventually returning a meaningful value from state[name], so I'm not quite sure what the mismatch is (as in, I'm still not sure I see the actual problem being discussed).

If there is a problem here, it's most likely on the React-Redux side, and if there's a problem it's probably a timing question.

I'm going to move this over to the React-Redux repo. Can you expand the example to show more specifically where and how you are expecting the component to re-render?

[markerikson]

Closing due to lack of response.