redux的作用
react 本身是通過props傳遞state的霉旗，層級嵌套太深的話澄步，傳遞屬性就需要一層層向下傳遞，回傳也需要一層層的回調(diào)目锭。
redux 的作用就是實現(xiàn)跨級傳遞state
react-redux 是連接react && redux的插件
簡單例子
實現(xiàn)數(shù)字增加和減少
QQ20181113-2@2x.png
app.js
//app.js
import React from ‘react’
import ReactDOM from 'react-dom’
import {Provider} from 'react-redux’
import Action from './Action’
import store from './Reducers’
ReactDOM.render(<Provider store={store}><Action/></Provider>, document.getElementById('root’));
Reducers.js
//Reducers.js
import {createStore} from “redux”;
let reducers = function(state=1, action){
switch (action.type) {
case ‘ADD’:
return state + 1;
break;
case ‘DEC’:
return state - 1;
break;
default:
return state;
}
};
export default createStore(reducers);
Action.js
//Action.js
import {connect} from 'react-redux’
class Action extends React.Component {
constructor(props){
super(props);
}
render() {
return (
<div>
<h1>current number: {this.props.state}</h1>
<button onClick={this.props.dec}>dec</button>
<button onClick={this.props.add}>add</button>
</div>
);
}
}
function mapStateToProps(state) {
return {
state:state
}
}
function mapDispatchToProps(dispatch) {
return {
add:function(e){
const action = {
type: ‘ADD’,
};
dispatch(action);
},
dec:function(){
const action = {
type: ‘DEC’
};
dispatch(action);
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Action);
