redux 和react-redux的区别

https://blog.csdn.net/GreyCastle/article/details/105510924

redux
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { createStore } from 'redux'

const tiger = 10000

//这是action
const increase = {
type:'涨工资'
}
const decrease = {
type:'扣工资'
}
//这是reducer
const reducer = (state = tiger, action) => {
switch (action.type){
case '涨工资':
return state += 100;
case '扣工资':
return state -= 100;
default:
return state;
}
}

//创建store
const store = createStore(reducer);

//订阅事件
store.subscribe(() =>
console.log(store.getState())
);

//派发事件
store.dispatch(increase)

ReactDOM.render(, document.getElementById('root'));

////
react-redux

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider, connect } from 'react-redux';

class App extends Component {
render() {
const { PayIncrease, PayDecrease } = this.props;
return (

当月工资为{this.props.tiger}

升职加薪
迟到罚款

);
}
}

const tiger = 10000

//这是action
const increase = {
type: '涨工资'
}
const decrease = {
type: '扣工资'
}
//这是reducer
const reducer = (state = tiger, action) => {
switch (action.type) {
case '涨工资':
return state += 100;
case '扣工资':
return state -= 100;
default:
return state;
}
}

//创建store
const store = createStore(reducer);

//需要渲染什么数据
function mapStateToProps(state) {
return {
tiger: state
}
}
//需要触发什么行为
function mapDispatchToProps(dispatch) {
return {
PayIncrease: () => dispatch({ type: '涨工资' }),
PayDecrease: () => dispatch({ type: '扣工资' })
}
}

//连接组件
App = connect(mapStateToProps, mapDispatchToProps)(App)

ReactDOM.render(


,
document.getElementById('root')
)