普通写法
@H_
502_2@原来在组件中
connect连接redux的写法是:
import { connect } from 'react-redux';
import { start,stop,reset } from './actions';
class Home extends Component {
...
// dispatch一个action
this.props.dispatch(reset());
...
const mapStateToProps = state => ({
timer: state.timer
})
}
export default connect(mapStateToProps)(Home);
@H_
502_2@或者
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './actions';
class Home extends Component {
...
// dispatch一个action
this.props.dispatch.reset();
...
const mapStateToProps = state => ({
timer: state.timer
})
const mapDispatchToProps = dispatch => ({
dispatch: bindActionCreators(actions,dispatch)
});
}
export default connect(mapStateToProps,mapDispatchToProps)(Home);
文艺写法
@H_
502_2@因为
@connect()是超前的
ES7写法,所以需要使用
babel转码. 在react-native项目目录下创建
.babelrc文件,
内容:
{
"presets": ["react-native"],"plugins": ["transform-decorators-legacy"]
}
@H_
502_2@因为
connect是超前的
ES7写法,"plugins": ["transform-decorators-legacy"]
}
@H_
502_2@在组件中使用:
import { connect } from 'react-redux';
import { start,reset } from './actions';
@connect(state => ({ timer: state.timer }))
class Home extends Component {
...
// dispatch一个action
this.props.dispatch(start());
...
}
export default Home;
@H_
502_2@或者:
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actions from './actions';
@connect(
state => ({ timer: state.timer }),dispatch => bindActionCreators(actions,dispatch),)
class Home extends Component {
...
// dispatch一个action
this.props.reset();
...
}
export default Home;
@H_
502_2@其中异同,可以
console.log(this.props);一下就能更清晰了.
