如果对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 作者：吴佳浩
链接：https://www.jianshu.com/p/269473787332
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。