我意识到这是一个基本问题,但我没有在其他地方找到答案.
是store.dispatch同步还是异步Redux?
如果它是异步的,有可能在动作传播之后添加回调,因为它可以用React?
由于我有一个带有表单的组件,我需要将表单连接到组件状态.初始数据来自Redux,因此尝试通过使用props设置状态来初始化和更新组件:
componentWillMount = () => {
this.setState({
language: this.props.language || 'en'
})
}
Run Code Online (Sandbox Code Playgroud)
language 是一个连接道具,我检查它是在商店更新.
const mapStateToProps = state => ({
language: state.language
})
Run Code Online (Sandbox Code Playgroud)
我还试图用componentWillReceiveProps和componentWillUpdate,但它不工作.我得到初始状态,即使商店和连接的道具发生变化,组件的状态也不会更新.
{this.props.language} // updates
{this.state.language} // doesn't change
Run Code Online (Sandbox Code Playgroud)
从Redux数据管理表单的正确方法是什么?
该render部分:
render () {
const {classes, theme, web} = this.props
const language = (
<CardContent>
<Typography type="headline">
Language
</Typography>
<Divider/>
<form className={classes.container} autoComplete="off">
<FormControl fullWidth margin="normal">
<InputLabel htmlFor="language">Select Block</InputLabel>
<Select
value={this.state.language} // <==================== language
onChange={this.handleLanguaheChange}
input={<Input id="language"/>}
>
<MenuItem value={'en'}>English</MenuItem>
<MenuItem …Run Code Online (Sandbox Code Playgroud) 在它周围,但不是因为我有足够的想法redux-thunk,react-router但我没有得到这个看似简单的想法:
调用路线的改变通过编程<Route/>的history.push('/')后一个动作完成分发到店里,当按钮被按下这样的事情发生.
const LoggerRedux = ({stateProp, LogIn}) => {
return(
<div>
<h2>Here is the button. Use this to login</h2>
<Route render={({ history}) => (
<button
type='button'
onClick={
//Something that calls {LogIn}
//and then the history.push('/')
}
>
Log yo Arse Inn
</button>
)}>
</Route>
</div>
)
}
const mapStateToProps = (state) => {
return {
stateProp : state
}
}
const mapDispatchToProps = (dispatch) => {
return {
LogIn : () => …Run Code Online (Sandbox Code Playgroud) 我正在使用react-redux,并向我的redux状态添加了一个“过滤器”字段,其中包含我想要用于从数据库接收数据的所有过滤器。
我的目标是在添加过滤器后立即使用更新的过滤器从数据库接收数据。这是我到目前为止得到的:
--- actions.js ---
...
export function addFilter(filter, value) {
return {
type: 'ADD_FILTER',
filter: filter,
value: value
}
}
...
Run Code Online (Sandbox Code Playgroud)
---reducer.js ---
...
case 'ADD_FILTER':
return update(state, {
filters: {
$merge: {
[action.filter]: action.value
}
}
});
...
Run Code Online (Sandbox Code Playgroud)
---过滤组件.js ---
...
addFilterAndUpdateData(filter, value) {
this.props.addFilter(filter, value);
this.props.getData(this.props.filters);
// this.props.filters is connected to state.filters.
// it DOES update, but not right away. so when getData is dispatched
// this.props.filters holds the old object and not the updated …Run Code Online (Sandbox Code Playgroud)