Map properties to state in react-redux
Whatever i understand, all you want to do is to convert the component's props to component's own state. You can always change the component's props to component's state in the componentWillReceiveProps
life cycle method in component like this.
//component
class MyComponent extends Component {
componentWillReceiveProps(newProps){
if(newProps.variableInProps != this.props.variableInProps){
this.setState({variableInState: newProps.variableInProps })
}
}
render() {
(<div onClick={this.props.executeAction.bind(this)}>
{this.state.variableInState}
</div>)
}
someOtherMethod() {
// I want to operate with state here, not with props
// that's why my div gets state from this.state instead of this.props
this.setState({variableInState: 'someValue'})
}
}
export default connect((state, ownProperties) => {
return {
// So I want to change MyComponent.state.variableInState here
// but this method updates MyComponent props only
// What can I do?
variableInProps: state.myVariable
}
}, {executeAction})(MyComponent);
componentWillReceiveProps
method is always executed by react whenever a new props is coming to component so this is the right place to update your component's state according to your props.
UPDATE :
The componentWillReceiveProps
has been deprecated. So instead of this method you can use componentDidUpdate
method to do this. componentDidUpdate
method takes previous props and previous state as arguments. So you can check for the change in props and then set the state.
componentDidUpdate(prevProps) {
if(prevProps.variableInProps !== this.props.variableInProps){
this.setState({variableInState: this.props.variableInProps })
}
}
I think you're not supposed to directly change the state like this. why not call another action to perform what you want?
The state should be immutable when using Redux. You should dispatch an action. A Reducer should receive the action and the current state, and return a new state object that includes the changes you want to make. Check this: http://redux.js.org/docs/introduction/ThreePrinciples.html#changes-are-made-with-pure-functions