score:4
the connect()
method, it does not modify the component class passed to it; instead, it returns a new, connected component class for you to use.
the mapstatetoprops()
function is called any time the connector component needs to compute new props, as a result of a store state change.
reference: react-redux api
when you dispatch an action:
this.props.change("hello world");
console.log(this.props.title);
which will make the store state change, as a result, the mapstatetoprops()
function will be invoked and the connect()
function will get the current component and return for you a new component with the updated props
.
the console.log(this.props.title)
is executed with the value of the property title of the old props object of the old component.
i put some lifecycle hooks in your codes to see what actually happened:
import react from "react";
import { connect } from "react-redux";
import { change } from "./actions";
class app extends react.component {
constructor(props) {
super(props);
console.log("contructor(): " + this.props.title);
}
handlebuttonchange = e => {
this.props.change("hello world");
console.log("handlebuttonchange(): " + this.props.title);
};
componentdidmount() {
console.log("componentdidmount(): " + this.props.title);
}
componentdidupdate(prevprops) {
// typical usage (don't forget to compare props):
if (this.props.title !== prevprops.title) {
console.log("componentdidupdate(): " + this.props.title);
}
}
componentwillunmount() {
console.log("componentwillunmount(): " + this.props.title);
}
render() {
console.log("render(): " + this.props.title);
return (
<div classname="app">
<button onclick={this.handlebuttonchange}>change the title</button>
</div>
);
}
}
const mapstatetoprops = state => ({
title: state.title
});
const mapdispatchtoprops = dispatch => ({
change: title => dispatch(change(title))
});
export default connect(
mapstatetoprops,
mapdispatchtoprops
)(app);
and the results after clicking four times on the button are:
therefore, in case you want to use the new computed props for the first time, it's updated, you should do it in the componentdidupdate()
however, i also see that you want to use the new props
directly after dispatching an action:
this.props.change("hello world");
// stop here, creating a new component, merging props, then executing the next line
console.log(this.props.title);
i think that's somehow impossible.
the rework demo: https://codesandbox.io/s/wol55qqx0k
Source: stackoverflow.com
Related Query
- Why react receives updates for redux state asynchronously
- My Redux state has changed, why doesn't React trigger a re-render?
- No need for state in React components if using Redux and React-Redux?
- React w/ TypeScript: why is the type for the state lost when useState with a callback as the updater
- Why does React have to use setState for state update?
- Sync queryParameters with Redux state and react router for function components
- How to wait for a Redux action to change state from a React component
- How can I initialize Redux state for React component on its creation?
- Which is better practice for setting state in react redux
- Why is redux state not mapped to react state?
- Redux state shape for managing multiple React component instances?
- Why does React render component for the second time after setting the state to the same value?
- How to use React Redux state for conditionally showing and Disabling a Button
- React JS state updates for collections of objects
- React redux Sagas, wait for a Saga to set state
- React + Redux best practice for router redirecting on redux state change
- Why is my original state mutated when filtering with react redux
- Why is this React component state recognized in the JSX return() for the first <p> but not for the second <p>?
- Trying to reflect changes in Redux State from CurrentUser on React DOM for CurrentUser?
- How to create a specific React or Redux state for referencing individual product quantities?
- React context requires 2 state updates for consumers to re-render
- Why does React protected route works for the 2nd time with Recoil state
- How to wait for redux state change and then render page in React
- React Redux wait for state change
- How to set state at the server for data from API using react redux
- Why does react redux does not re render view for object states changes?
- Using React Redux Toolkit with Typescript - set state for reducer
- React Why won't my app render the updated state for google maps?
- Redux updates state (in reducers), but React components do not re-render?
- React Redux skeleton returning undefined for value from state
More Query from same tag
- TypeError: dropdown is null when trying to access Dom element in reactjs
- ReactJS get values of dynamically created Radio Buttons and pass them into state (usestate)
- React ref with an id as attribute value
- I need to execute different API call for one component according screen type
- How to retrieve plain CSS from inline style in ReactJS?
- React error: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node
- React Redux reducer not Updating State
- Create Typescript interface with all properties for concrete JSX component
- Change not able to update on commentsRef.on("child_changed", (data) => {
- Reactjs - react-reponsive-carousel
- How to scroll to an element using React after an event?
- Failed prop type: Material-UI: Either `children`, `image`, `src` or `component` prop must be specified in ForwardRef(CardMedia)
- Get id from same element in ReactJS
- Trying to debounce search function calls results in no event passed to a function
- How to loop over JSON data from external file in ReactJS?
- Change color of Material UI Select component border not working
- Passing props state props using context api
- rechart error data.slice is not a funcation React.js
- Submit Post Form from React to Ruby on Rails API
- How to get new token from Cognito from the frontend?
- Dotnet React Template - is it possible to use /index.html
- React-JS : Initializing a global variable in componentDidMount but not getting its value in render
- React App - Why m count down is showing a dot whent the hours are equals to zero? And my minute is not 00 when pass of 59
- Error: Unable to resolve image URL from source (null)
- my page keeps disappearing when I try to use routes ad route in reacts
- BrowserRouter Link overriding onClick event
- How to find length of an array of objects from ReactJS setState?
- React eslint error missing in props validation on for the word "props"
- Change input given value to a custom value in ReactJS
- How to add and remove validation field to yup.validationSchema