1

My issue is the following:

redux state updates won't be mapped to the props immediately. This does not refer to useState of react. I'm referring to react-redux, where the state updates should be synchronous, afaik. I know they could be batched, but not sure if that is relevant here. I assume the update is happening immediately, but the mapping is not. I don't know how to get around this. I tried to replicate the error in a "clean" environment. Here is the Component:

import React from 'react';

function MyComponent({ title, setTitle }) {
  const handleclick = e => {
    console.log(title);
    setTitle("I don't get it.");
    console.log(title);
  };

  return <p onClick={handleclick}>{title}</p>;
}

export default MyComponent;

Here is the ComponentContainer:

import React from 'react';
import { connect } from 'react-redux';
import { setTitle } from '../../reducers/customReducer/actions.js';
import MyComponent from './MyComponent.jsx';

export const MyComponentContainer = props => {
  return <MyComponent {...props} />;
};

const mapStateToProps = state => {
  return {
    title: state.customData.title
  };
};

const mapDispatchToProps = dispatch => {
  return {
    setTitle: newTitle => dispatch(setTitle(newTitle))
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponentContainer);

I expect the second console.log to output the value I don't get it. But it doesn't. Though, the render update happens properly. Meaning the innerHTML of the p element will be updated and rendered accordingly "a bit later". How do I make it, that I can access the updated value instantly? This is causing an issue in my real world application. I'm not trying to simply print some value there, but rather, change a value and then call another function, that based on the updated value performs some action. Since the value isn't changed/mapped instantly, it won't work.

Am I doing something that shouldn't be done?

Yggdrasill
  • 166
  • 1
  • 3
  • 16
  • Does this answer your question? [useState set method not reflecting change immediately](https://stackoverflow.com/questions/54069253/usestate-set-method-not-reflecting-change-immediately) This is how the react lifecycle works. State is const during a render cycle, and ***only*** updated *between* them. – Drew Reese Aug 13 '20 at 08:40
  • Try using redux thunks if you need to do some complex logic along with the action itself. – Danilo Gacevic Aug 13 '20 at 08:45
  • I don't think so. This refers to useState of react. I'm referring to react-redux, where the state updates should be synchronous, afaik. I assume the update is happening immediately, but the mapping is not. (i'll update the post). – Yggdrasill Aug 13 '20 at 08:46
  • @Danilo, this would mean I should refactor the code and extract the logic from my component. Instead of using react-thunk, I could refactor the code in a way, where I introduce some boolean, that stores if the state has changed and the component reacts to this value change (maybe in useEffect). Does this answer the question though? Or do you mean, what I am doing is really bad and it should be avoided? And therefor I have to approach the implementation differently? – Yggdrasill Aug 13 '20 at 08:50
  • 1
    React lifecycle is react lifecycle. The redux state is simply passed as a prop to the component... i.e. new prop value, new render cycle. The state will remain constant throughout a single render cycle. Logging the state ***right*** after queueing a state update will log the state still from the current render cycle, the function doesn't wait for react to do its thing. – Drew Reese Aug 13 '20 at 08:53
  • @DrewReese I thought so. The mapping happens in the next render. But it seemed a littled odd to me. Do I have to wait for the next render, to be able to access the new state? Is that the way to go? – Yggdrasill Aug 13 '20 at 09:12
  • Yes, but you can use the `componentDidUpdate` lifecycle function or an `useEffect` hook to handle the updated state from the mapped state to props from redux. – Drew Reese Aug 13 '20 at 09:19

0 Answers0