react-reudx之@connect 摆脱redux的繁琐
2018-09-12 本文已影响0人
吴佳浩
如果对redux的概念和用法掌握的已经不错了 那么现在react-redux会让你的操作更加的得心印手
忘记subscribe，记住reducer，action和dispatch即可
React-redux提供Provider和connect两个接口来链接
这里我们还是用一个计数器来讲解
- 第一步安装
$ npm install react-redux --save
- React-redux具体使用
Provider组件在应用最外层，传入store即可，只用一次
index.js
import React from 'react';
import ReactDom from 'react-dom';
import App from './App'
//导入reducer 和actionCreator
import {counter} from './index.redux.js'
//导入createStore 的方法从redux当中 并且从redux当中导入处理中间件的方法applyMiddleware
import { createStore,applyMiddleware,compose} from 'redux';
//这里导入处理redux的中间件专门处理redux的异步问题 因为本身redux是同步的
//导入react-redux中的provider
import { Provider } from 'react-redux'
import thunk from 'redux-thunk'
/**使用createStor(reducer)方法生成store
* 添加applyMiddleware(thunk)方法来处理thunk中间件来达到处理异步的效果
* compose是用来组合createStore当中的多个方法
*/
const store= createStore(counter,compose(
applyMiddleware(thunk),
window.devToolsExtension?window.devToolsExtension():f =>f
))
ReactDom.render(
( //这里store 只需要在Provider上传入一次即可
<Provider store={store} >
<App />
</Provider>
),
document.getElementById('root'))
Connect负责从外部获取组件需要的参数
App.js
import React from 'react';
import { connect } from 'react-redux'
import {add_A,rem_R,addAsync} from './index.redux.js'
class App extends React.Component{
constructor(props){
super()
}
render(){
return (
<div>
<h1>现在是数字几{this.props.num}</h1>
{/*使用了connect之后这里不需要在手动的dispatch了直接调用即可*/}
<button onClick={this.props.add_A}>加</button>
<button onClick={this.props.rem_R}>减</button>
{/*这里点击完成之后就会触发异步方法 在两秒之后更新*/}
<button onClick={this.props.addAsync}>等两秒再加</button>
</div>
)
}
}
//接收store赋值给组件内部的props
const mapStatetoProps = (state) =>{
return {num:state}
}
//将store当中的所有的actionCreator放入actionCreators
const actionCreators = {add_A,rem_R,addAsync}
//将App传入connect当中 将所有的函数和参数都给到App 生成一个新的App 组件内部通过this.props即可获取 传入的参数和方法
App = connect(mapStatetoProps,actionCreators)(App)
export default App
这份代码是actionCreator和reducer 主要改变的代码都在
index.reduer.js
//创建常量
const ADD_N = "加"
const REM_N = "减"
//创建reducer 根据老的state和action 生成新的state
export const counter=(state=0,action)=>{
switch (action.type) {
case ADD_N:
return state+1
case REM_N:
return state-1
default:
return 10
}
}
//action creator
export const add_A=()=>{
return {type:ADD_N}
}
export const rem_R=()=>{
return {type:REM_N}
}
export const addAsync=()=>{
//这里返回的是一个箭头函数 因为只有dispatch一个参数所以省略括号
return dispatch=>{
//这里的方法回两秒之后执行
setTimeout(() => {
//两秒之后执行dispatch发布add_A这个actionCreator
dispatch(add_A())
}, 2000);
}
}
如果上面的基础用法你已经学会了那么再看看下面@connect注解的方法吧
使用装饰器优化connect代码
1、弹出个性化配置(因为很多的配置被react的脚手架隐藏了起来 这一步就是了展开，这个操作是不可逆的)
$ Npm run eject
2、安装依赖的插件
$ npm install babel-plugin-transform-decorators-legacy插件
3、完成上一步操作在Package.json里babel加上plugins配置 "plugins":["transform-decorators-legacy"]
"babel": {
"presets": [
"react-app"
],
"plugins":["transform-decorators-legacy"]
},
上面的步骤都完成了话就可以用@connect注解的方法来优化我们的App.js啦
App.js
import React from 'react';
import { connect } from 'react-redux'
import {add_A,rem_R,addAsync} from './index.redux.js'
/**没使用@conncet注解方式之前的实现
* 接收store赋值给组件内部的props
* const mapStatetoProps = (state) =>{
* return {num:state}
*}
*将store当中的所有的actionCreator放入actionCreators
*const actionCreators = {add_A,rem_R,addAsync}
*将App传入connect当中 将所有的函数和参数都给到App 生成一个新的App 组件内部通过this.props即可获取 传入的参数和方法
*App = connect(mapStatetoProps,actionCreators)(App)
*/
//使用注解的方式修改state和组件之间的传值
@connect(
//你需要state当中的什么参数 取出来就会放到props相对的参数当中
state=>({num:state}),
//你需要state当中的什么方法就可以写到下面的大括号中就能被放到props当中 并且会自动dispatch
{add_A,rem_R,addAsync}
)
class App extends React.Component{
constructor(props){
super()
}
render(){
return (
<div>
<h1>现在是数字几{this.props.num}</h1>
{/*使用了connect之后这里不需要在手动的dispatch了直接调用即可*/}
<button onClick={this.props.add_A}>加</button>
<button onClick={this.props.rem_R}>减</button>
{/*这里点击完成之后就会触发异步方法 在两秒之后更新*/}
<button onClick={this.props.addAsync}>等两秒再加</button>
</div>
)
}
}
export default App
