本文主要记录下自己在react道路上的爬坑过程 以及对于刚学习redux的同学提供一些可供参考的例子。
要知道redux和react并没有半毛钱的关系,redux甚至可以和jq一起用。 react-redux才是react的用于便捷操作redux的第三方插件。所以呢,学习react-redux之前我们要比较熟悉的了解redux的思想。
首先安装react-redux:
npm install react-redux --S
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 (
<div className="App">
<div className="App">
<h2>当月工资为{this.props.tiger}</h2>
<button onClick={PayIncrease}>升职加薪</button>
<button onClick={PayDecrease}>迟到罚款</button>
</div>
</div>
);
}
}
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(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
)
首先最明显的是demo中引入react-redux的Provider和connect,它们非常重要!这里先大概解释下它们的作用:
Provider:它是react-redux 提供的一个 React 组件,作用是把state传给它的所有子组件,也就是说 当你用Provider传入数据后 ,下面的所有子组件都可以共享数据,十分的方便。
Provider的使用方法是:把Provider组件包裹在最外层的组件,如代码所示,把整个APP组件给包裹住,然后在Provider里面把store传过去。注意:一定是在Provider中传store,不能在APP组件中传store。
connect:它是一个高阶组件 所谓高阶组件就是你给它传入一个组件,它会给你返回新的加工后的组件,注重用法倒简单,深究其原理就有点难度。这里不做connect的深究,主要是学会它的用法,毕竟想要深究必须先会使用它。首先它有四个参数([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]),后面两个参数可以不写,不写的话它是有默认值的。我们主要关注下前两个参数mapStateToProps和mapDispatchToProps。
connect的使用方法是:把指定的state和指定的action与React组件连接起来,后面括号里面写UI组件名