加入QQ群:864680898,一起学习进步!点击群名可查看本人网站,有最新文章!
redux + react-redux使用redux中文文档
Why? 为什么要用redux?
解决react组件间传值,并且要状态动态更新麻烦的问题。redux就是个中央仓库,将数据存在了一个地方,而且只能通过定义了的方法来更改,保证了数据的唯一性和稳定性
一、安装
npm install redux --save
- 如果只用redux的话,那么状态更改了,只能通过subscribe的回调中得到新的状态,那么还是一样繁琐,所以一般与react-redux一起使用
npm install react-redux --save
- react-redux中的Provider组件,redux生成的store传入就能传递到每个组件中,react-redux的Provider就是如下实现的
class Provider extends Component {
getChildContext() {
return {
store: this.props.store
};
}
render() {
return this.props.children;
}
}
Provider.childContextTypes = {
store: React.PropTypes.object
}
二、编写Reducer
// /store/counter.js
const counter = (state, action) => {
if (typeof state === 'undefined') {
return 0
}
switch (action.type) {
case 'add':
return state + 1
case 'reduce':
return state - 1
case 'set':
return action.value
default:
return state
}
}
export default counter;
三、创建store并绑定到Provider上
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import counter from './store/counter.js'
const store = createStore(counter)
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root'));
registerServiceWorker();
四、在组件中得到state,并dispatch
- 使用react-redux的connect,将Provider的store中的state和需要的dispatch连接到现在的组件,那么在组件中就能直接使用this.prop访问到属性和方法
import React, { Component } from 'react'
import './Detail.css'
import { connect } from 'react-redux'
class Detail extends Component{
constructor(props){
super(props)
this.state = {
styleObj: { background: '#00bcd4' }
}
}
render(){
return(
<div className="detail" style={this.state.styleObj}>
<h4>{this.props.myInfo.name}</h4>
<p onClick={() => this.props.add()}>设置名字</p>
</div>
)
}
componentWillMount(){
console.log(this.props.counter)
}
}
const mapStateToProps = state => {
return {
counter: state
}
}
const mapDispatchToProps = dispatch => {
return{
add() {
dispatch({ type: 'add' })
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Detail)