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