[英]Map properties to state in react-redux
我有一个使用state
为用户提供数据的组件。 例如<div>this.state.variableInState</div>
。 此组件可以调度某些方法(例如onClick
操作)。 我目前正在使用react-redux
一种connect
方法来将store
映射到props
。 有没有一种方法可以让我setState
发出后?
// 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);
无论我理解什么,你想要做的就是将组件的道具转换为组件自己的状态。 您可以随时在组件中的componentWillReceiveProps
生命周期方法中将组件的props更改为组件的状态,如下所示。
//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
已被弃用。 因此,您可以使用componentDidUpdate
方法来代替此方法。 componentDidUpdate
方法将先前的props和先前的状态作为参数。 因此,您可以检查道具的变化,然后设置状态。
componentDidUpdate(prevProps) {
if(prevProps.variableInProps !== this.props.variableInProps){
this.setState({variableInState: this.props.variableInProps })
}
}
我想你不应该直接改变这样的状态。 为什么不叫另一个动作来执行你想要的?
使用Redux时,状态应该是不可变的。 你应该派遣一个行动。 Reducer应该接收操作和当前状态,并返回包含您要进行的更改的新状态对象。 检查一下: http : //redux.js.org/docs/introduction/ThreePrinciples.html#changes-are-made-with-pure-functions
当然可以,onClick绑定到某个函数,如下所示:
onClick={this.myfunction.bind(this)}
然后将此myfuntion定义为:
myfunction() {
this.setState({ somestate: value });
this.props.executeAction();
}
这里setState改变本机组件状态,如果由reducer定义,则调用action将改变redux状态。 这些州是独立的。
连接包装器(第一个参数)将状态映射到props(redux状态以反应props)而不是组件状态本身。
好问题是为什么你需要两个,确定有一些例子,这可能是有用的...
通常,如果您需要全局需要的状态,则使用redux状态(很容易应用于所有组件),对于某些本地状态,使用react native。 (例如,当您构建一些ui组件,如自定义复选框)
还有静态getDerivedStateFromProps :
static getDerivedStateFromProp(nextProps, prevState) {
return {stateVar: nextProps.var} // this will propagate as component state
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.