2017-09-26 89 views
0

我使用react-native与react-redux和redux-thunk。基本上我有一个Component连接到store它修改了它的一些信息与dispatch。尽管每个操作似乎都是同步的,但在修改后,我会在下一行获取旧数据。如何等待减速机商店分配完成?

//reducer 
import {assign as _assign} from 'lodash-es'; 
let initialState = {name: '1'}; 
export default (state = initialState, action) => { 
    switch (action.type) { 
     case 'Project renamed': 
      return _assign({}, state, {name: action.data}); 

     default: 
      return state; 
    } 
}; 

//Component 
import React, {Component} from 'react'; 
import {connect} from 'react-redux'; 
import Prompt from 'react-native-prompt'; 

class HomeScreen extends Component { 
    render() { 
     return <Prompt 
       onSubmit={() => { 
        this.props.onProjectRenamed('2'); 
        console.log(this.props.currentProject.name) //Still get '1' here!!! 
       }} 
      />; 
    } 
} 

const mapStateToProps = state => ({ 
    currentProject: state.currentProject 
}); 
const mapDispatchToProps = dispatch => ({ 
    onProjectRenamed: (data) => dispatch({ 
     type: 'Project renamed', 
     data: data 
    }) 
}); 
export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen); 

如何获取新的this.props.currentProject.name值?

回答

1

你可以从你的行动返回一个承诺,

const mapDispatchToProps = dispatch => ({ 
    onProjectRenamed: (data) => { 
     dispatch({ 
      type: 'Project renamed', 
      data: data 
     }) 
     return Promise.resolve() 
    } 
}); 

现在你可以在onProjectRenamed

onSubmit={() => { 
    this.props.onProjectRenamed('2').then(() => console.log(this.props.currentProject.name)) 
}} 
+0

哦,当然,我有它。在我的文章中只是一个错字。 – JustLogin

+0

@JustLogin查看更新 – FuzzyTree

+1

它的工作原理,但是如何?你的'onProjectRenamed'中的所有内容似乎都保持同步(先发送'dispatch',然后返回'resolve')。为什么只有在'store'被修改后才返回Promise.resolve()'触发器? – JustLogin

1

您触发动作时被调用onSubmit使用then。此操作正在更新状态对象,这意味着您的组件将收到新的道具。 如果实现,ComponentWillReceivePropsComponentWillUpdate方法您的组件,然后再尝试打印,console.log(nextprops.currentProject.name)里面,你会得到响应,2只是尝试,

componentWillReceiveProps(nextProps) { 
    console.log(nexProps.currentProject.name) 
} 

记住,当你的组件的render方法后调用状态已更新,this.props.currentProject.name将具有最新值,即2。

有关更多详细信息,请参阅反应组件lifeCycle methods

+0

覆盖'ComponentWillReceiveProps'适用于我,但没有办法在'this.props.onProjectRenamed'中传递回调或承诺吗? – JustLogin

+0

我不这么认为。如果你可以解释,为什么你想要回调,我可能会提出一个解决方案。 – ggsrivas