将属性映射到react-redux中的状态 [英] Map properties to state in react-redux
问题描述
我有一个使用 state
的组件来向用户提供数据。例如< div> this.state.variableInState< / div>
。此组件可以调度某些方法(例如,在 onClick
操作上)。我目前正在使用 react-redux
一个 connect
方法来映射 store
到道具
。派遣后我有没有办法 setState
?
I have a component that uses state
to provide data to user. For example <div>this.state.variableInState</div>
. This component can dispatch some method (for example on onClick
action). I'm currently using react-redux
an connect
method to map store
to props
. Is there a way I can setState
after dispatch?
// actions
export function executeAction() {
return function (dispatch, getState) {
dispatch({
type: 'MY_ACTION',
payload: axios.get('/some/url')
});
};
}
// reducer
export default function (state = {}, action) {
switch (action.type) {
case 'MY_ACTION_FULFILLED':
return {...state, myVariable: action.payload.data}
}
}
//component
class MyComponent extends Component {
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);
推荐答案
无论我理解什么,你想做的就是将组件的props转换为组件自己的状态。您可以随时在组件中的 componentWillReceiveProps
生命周期方法中将组件的道具更改为组件的状态。
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
方法总是通过反应来执行一个新的道具来到组件,所以这是根据你的道具更新你的组件的状态的正确的地方。
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.
更新:
不推荐使用 componentWillReceiveProps
。因此,您可以使用 componentDidUpdate
方法来代替此方法。 componentDidUpdate
方法将先前的道具和先前的状态作为参数。所以你可以检查道具的变化,然后设置状态。
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 })
}
}
这篇关于将属性映射到react-redux中的状态的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!