score:1
i put all states on redux store, don't use local state anymore, use mapstatetoprops
make state as props, then get the latest value from it. it is the best practice i think:
handlechange(event) {
event.preventdefault();
this.props.selectlayoutaction(event.target.value);
this.props.resetstyles();
}
handlethemechange(event) {
event.preventdefault();
this.props.setlayoutthemeaction({
name: this.props.selectlayout,
currenttheme: event.target.value
});
}
render() {
const { layouts, selectlayout } = this.props;
let layoutslist = list(layouts);
let currenttheme = '';
if (layouts && layouts.get) {
let targetlayout = layouts.find((layout) => layout.get('name') === selectlayout);
currenttheme = targetlayout.get('currenttheme');
}
return (
<div>
<select onchange={this.handlechange.bind(this)} value={selectlayout}>
{this.renderoptions(layoutslist)}
</select>
<select onchange={this.handlethemechange.bind(this)} value={currenttheme}>
{this.renderthemeoptions(selectlayout, layouts)}
</select>
</div>
);
}
function mapstatetoprops(state) {
console.log('update selectlayout!!! ', state.selectlayout);
syncselectlayout = state.selectlayout;
return {
layouts: state.layouts,
selectlayout: state.selectlayout
};
}
function mapdispatchtoprops(dispatch) {
return bindactioncreators({ selectlayoutaction, setlayoutthemeaction, resetstyles }, dispatch);
}
score:4
that would assume synchronous behavior from redux. never assume anything about setstate and dispatch execution order with redux. so, what you probably want is to either do full-blown redux and put everything in redux's store, then use mapstatetoprops, or use componentwillreceiveprops to trigger your state changes. putting everything in the redux store and state, that is the preferred long-term option, more maintainable and unit-testable.
Source: stackoverflow.com
Related Query
- react/redux:Get the latest props value from state after updating props with dispatch right away
- React Hooks - What is the recommended way to initialize state variables with useState() from props
- pass boolean state value from parent class to child class when a button is clicked in the parent class in react js so that i can load quizes with bool
- Can't stop React from updating the main component after state change
- How to instantly update react state after replacing the value from array
- after setting the input field value to a state object with an empty value, now I can't type anything in the input field in the UI. i am using react js
- In React components implemented with hooks, how can the latest component state values be read from within setInterval?
- React onChange doesn't return updated value after updating the state
- react child state doesn't update with props from father (and deeper in the branch)
- React + Redux - Input onChange is very slow when typing in when the input have a value from the state
- Updating state with props on React child component
- Updating a React Input text field with the value on onBlur event
- How to initialize the react functional component state from props
- Updating Parent Component State from Child Component with UseState React Hook
- A component is changing the default value state of an uncontrolled Slider after being initialized. Material UI Slider with Redux State
- get latest state value after setState hook within async await block in react
- How to make my component re render after updating props from selector in react and redux-saga?
- Unable to set props values after delete the record from the list in React context API
- Conditionally check value from context and then navigate after login in the same function call in React
- React is not updating the UI after receiveing data from the API call (using hooks)
- How to access the latest state value in the functional component in React
- How to pass input values from a child Form component to the state of its parent component for submission with react hooks?
- Setting and updating state in React JS with Dropdown component from Material UI
- How to call event from component after setting its state with React hooks?
- React custom hook with event listener not works while updating the state
- Getting latest state value with React Hook?
- Updating state from an array with react useState hook
- How to pass the props value from the other sibling components in React JS
- How to switch the state of buttons in react hooks after updating it through rest api?
- In React useEffect does not update after the value has changed from other component
More Query from same tag
- How does Augmentation work in React?
- I am trying to save data in database but facing error
- How to give next js app build to the client
- How to pass parameter value into modal box with react
- 'Keypress" event called twice when using arrow function notation
- Getting net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 when consuming event-stream using EventSource in ReactJs
- How to reverse looping array items with modulus
- Using external objects as state properties in React
- Can babel-standalone be used if index.html is served locally ? (no webserver)
- audio.play is not a function error from arrow function component using ref
- React Deployment: package.json file's "homepage" property not being recognized by build script
- Component not re-rendering when using 'content' property (react-insta-stories)
- REACTJS - Getting a TypeError for state variable
- Security of firebase realtime database rules
- How to convert unicode escape sequences to unicode characters in react javascript
- Retrieve a particular value from Rest Api using react js
- How do you set the state of one component from a different component in react?
- nginx with react-router /api is a 404 page
- Issues trying to do 'npm install create-react-app' - why am i getting a saveError with a package.lock.json?
- BroadcastChannel sometime not listening at useEffect
- Is it possible to use if...else... statement in React render function?
- How can I change the color of a child component when clicked?
- How can I add ellipsis for overflowing text within AntDesign's Table component?
- Compose from apollo is not a function?
- State doesn't update on search input clear/backstage
- How to design a ReactJS component that listens to a WebSocket and interacts with CSS animation
- react firebase config .env file doesn't work
- React Hooks: useEffect with dependecy also called when component mounts
- React js not navigating to pages using react router
- I cannot use folder path in css in my react app