hi,你好!欢迎访问本站!登录
本站由网站地图腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 杂谈 - 正文 君子好学,自强不息!

react中运用redux浅易案例解说

2019-11-18杂谈搜奇网19°c
A+ A-

为何我想要运用redux?

  前段时间开端上手了react,最近在运用react的过程当中发明关于组件之间通讯的需求比较急切,尤其是在axios异步要求后端数据的时刻,如许的需求是迥殊猛烈的!举个例子:

  // 厂家报告到货 class ReportArrivalGoods extends React.Component{     constructor(props){         super(props);         this.state = {             columns:tableHead.ReportArrivalGoods,//这里是初始化的表头,内容较多,不显现出来了             data: []           };     }
    componentDidMount(){      axios(         {             method: 'get',             url: 'http://172.89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods'         })         .then(             res => {              this.setState(                   data:NewState             );             }         )         .catch(             error => {                 console.log(error);             }         );     }
    render(){         return(             <Table             style={{width: '100%'}}             columns={this.state.columns}             data={this.state.data}             border={true}             maxHeight={tableMaxHeight}           />         );     }      }  
  

  我们聚焦于下面的componentDidMount()函数

    componentDidMount(){      axios(         {             method: 'get',             url: 'http://172.89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods'         })         .then(             res => {              this.setState(                   data:NewState             );             }         )         .catch(             error => {                 console.log(error);             }         );     }

  这是人人都很熟习的react生命周期钩子函数,我做了如许一件事:页面衬着完向背景要求数据并显现到页面上。然则用过axios的都晓得,他跟ajax一样,都是异步的,也就说,你发处要求后就会马上实行背面的代码了,等你要求效果回来了才会实行then()和catch()。一开始我简朴粗犷的直接把全部函数体写进了钩子中,实现是没题目了,但是要运用钩子函数要求差别数据的组件有5个,如果每一个组件都写这么一长串代码,一方面不好看,另一方面反复代码太多了。因而我想到了把这段函数体封装起来,因而就有下面的代码

 

//webservice数据要求函数
function AxiosGet(desinationURL){
    axios(
        {
            method: 'get',
            url: desinationURL
        })
        .then(
            res => {

                    );
            }
        )
        .catch(
            error => {
                console.log(error);
            }
        );
}

 

  但是如果封装了怎样设置我组件的state呢?机灵的我想到了个要领,在组件内部建立一个带参函数modifyState(),在使AxiosGet()函数时将modifyState()函数作为参数传入AxiosGet()并在AxiosGet()内部将res.data作为参数传modifyState()从而到达setstate的目标。说起来有点绕,用代码措辞

//webservice数据要求函数
function AxiosGet(desinationURL,ApplyNewState){
    axios(
        {
            method: 'get',
            url: desinationURL
        })
        .then(
            res => {
                ApplyNewState(res.data);
            }
        )
        .catch(
            error => {
                console.log(error);
            }
        );
}

  上面是组件外部的数据要求函数,下面的是组件内部的钩子函数和用于传入猎取数据的函数

  modifyState(NewState){
        this.setState(
            {
                data:NewState
            }
        );
    }
    componentDidMount(){
        AxiosGet('http://172.89.1.79/LogisticsSporadicBoardBackEnd/index.asmx/ReportArrivalGoods',
        this.modifyState
        );
    }

  恩,明眼人应当已看懂了,我奇妙的经由过程在组件内部将函数传出的体式格局完成了state的更新,题目虽然处置惩罚了,然则如许操纵实在贫苦,如果能在组件外部更新组件的state就好了。有人要说了,状况提拔啊!为一切的组件建立一个父组件,在父组件中统一更新状况并经由过程props的情势传入子组件。恩,这确实是个要领,然则父组件就没有表达出了迥殊的意义了,就好像div一样,没有语义化,有无更好的体式格局呢?百度搜搜react的state,来了来了,他来了,灯灯灯灯!redux闪亮上台!

Redux运用七步走

  此处关于redux的学问不做解说了,我晓得也就那样,redux官网上教程很清楚,能够直接过去学,我主要讲讲redux在react中的运用。如题目所说,只须要七步。尽人皆知,在redux中,最主要的东西就三个

{

行动:action,

行动处置惩罚函数:reducer,

状况堆栈:store

}

想必redux官方教程过了一遍的人都能轻松理清个中关联与详细运行吧,那末题目来了,怎样在react中把组件们的state和store给他绑定上呢?网上帖子一大堆,然则跟我之前那篇中说的一样,抄来抄去,没有真正讲到小白的点子上,有的还抄错了致使读者误会,这里我从小白视角做出最贴切的解说,置信人人听完手敲一遍也就懂了。我是用create-react-app搭建的开辟环境,这里不做赘述。话不多说,上代码!目次构造如图所示:

 

 

 

第一步:装置依靠:

npm i redux react-redux -s

第二步:建立action

// /actions/test.js

export const PLUS='PLUS'; export function plusActionCreator(){ return{ type:PLUS } }

第三步:建立reducer

// /reducers/test.js
 import {PLUS} from '../actions/test' const initState={count:0}; export function plusReducer(state=initState,action){ switch(action.type){ case PLUS:{ return 
       { count:state.count+1;//此处返回的state只是plusReducer这个小范围内的state,明白这一点很主要!!!
       }
    }
    default:return state;
  }
}
 

第四步:建立store

// /index.js

const reducer=combineReducers({plus:plusReducer});//这里须要传入json对象才行,对象名代表来自哪一个reducer var store=createStore(reducer);

  上面是redux部份,人人应当很熟习了,此时也到了最主要的部份:react和redux的连系。须要申明一下,react的组件我们如今分为展现组件和容器组件两类,展现组件担任界面显现,容器组件担任为展现组件治理state。展现组件的一切state经由过程props传入。

第五步:建立展现组件

// /index.js

function Test (props){
    return(
        <div>
            <p>总计数:{props.count}</p>
            <button onClick={props.plus}>加一</button>
        </div> 
    );
}

 

第六步:经由过程react-redux供应的connect要领生成容器组件

// /index.js

const CollectionComponent=connect(
    (state)=>{
        return{
            count:state.plus.count//这里须要注重,各个小版块的state是经由过程combinereducers中定名的json对象名做了分开的
                    //此处的json对象count与展现组件中的props.count是对应关联
} }, (dispatch)=>{ return{ plus:bindActionCreators(plusActionCreator,dispatch)
       //此处的json对象plus与展现组件中的props.plus要领也是对应关联
} } )(Test);//此处的Test与展现组件名也是对应关联
  

  这里很症结,起首const CollectionComponent,这个CollectionComponent就是我们所须要的容器组件。

  connect(read,write)(destination)函数有三个参数read、write和destionation(抽象名,为了轻易明白这么叫),read的目标就是从store中返回我们要的state,write的目标是传入action来更新state,destination用来绑定到指定的展现组件。

第七步:经由过程react-redux供应的Provider组件搭建react和redux数据交互的桥梁

// /index.js

ReactDOM.render(   
<Provider store={store}>//这里把之前建立的store传给Provider,如许store中的state就可以传到达容器组件中了 <CollectionComponent/>//因为第六步忠已把展现组件绑定到了容器组件上了,所以此处只需写容器组件即可   </Provider>   ,document.getElementById('root'));

 

 

 

OVER!经由过程这个小demo即可完成一个简朴的累加器。末了贴上完全源码,嘿嘿嘿,yes!

// /reducers/test.js

import {PLUS} from '../actions/test'

const initState={count:0};

export function plusReducer(state=initState,action){
    switch(action.type){
        case PLUS:{
            return {
                count:state.count+1
            }
        }
        default:return state;
    }
}
// /actions/test.js

export const PLUS='PLUS';

export function plusActionCreator(){
    return{
        type:PLUS
    }
}
// /index.js

//react
import React from 'react'
import ReactDOM from 'react-dom'
//redux
import {connect,Provider} from 'react-redux'
import {bindActionCreators,combineReducers,createStore} from 'redux'
import {plusReducer} from './reducers/test'
import {plusActionCreator} from './actions/test'
//显现部份
function Test (props){
    return(
        <div>
            <p>这里是count:{props.count}</p>
            <button onClick={props.plus}>加一</button>
        </div> 
    );
}
//redux部份
const reducer=combineReducers({plus:plusReducer});//这里须要传入json对象才行
var store=createStore(reducer);

const CollectionComponent=connect(
    (state)=>{
        return{
            count:state.plus.count//这里须要注重,各个小版块的state是
                                  //经由过程combinereducers中定名的json对象名做了分开的
        }
    },
    (dispatch)=>{
        return{
            plus:bindActionCreators(plusActionCreator,dispatch)
        }
    }
)(Test);

ReactDOM.render(
<Provider store={store}>
     <CollectionComponent/>
</Provider>
,document.getElementById('root'));

末了再给个小彩蛋吧,本日刚捣鼓的react-router的小demo,也是嵌套在上面的代码中的。

//react
import React from 'react'
import ReactDOM from 'react-dom'
//redux
import {connect,Provider} from 'react-redux'
import {bindActionCreators,combineReducers,createStore} from 'redux'
import {plusReducer} from './reducers/test'
import {plusActionCreator} from './actions/test'
//router
import { BrowserRouter,Switch,Route,NavLink  } from 'react-router-dom';
//显现部份
function Test (props){
    return(
        <div>
            <p>这里是count:{props.count}</p>
            <button onClick={props.plus}>加一</button>
        </div> 
    );
}
//redux部份
const reducer=combineReducers({plus:plusReducer});//这里须要传入json对象才行
var store=createStore(reducer);

const CollectionComponent=connect(
    (state)=>{
        return{
            count:state.plus.count//这里须要注重,各个小版块的state是
                                  //经由过程combinereducers中定名的json对象名做了分开的
        }
    },
    (dispatch)=>{
        return{
            plus:bindActionCreators(plusActionCreator,dispatch)
        }
    }
)(Test);

ReactDOM.render(
<Provider store={store}>
    <BrowserRouter >
        <Switch>
            <Route path="/class/classmates">
                <div>QianYingLi,HaoWu,ZhouHuiFan</div>
                <NavLink to="/class" activeClassName="fillInClassNameHere">
                    redirect to class
                </NavLink>
            </Route>
            <Route path="/class">
                <div>高一二</div>
                <NavLink to="/class/classmates" activeClassName="hurray">
                    redirect to classmates
                </NavLink>
            </Route>
            <Route path="/">
                <CollectionComponent/>
            </Route>
        </Switch>
    </BrowserRouter >
</Provider>
,document.getElementById('root'));

 

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
react中运用redux浅易案例解说

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
未定义标签

本文来源:搜奇网

本文地址:https://www.sou7.cn/281970.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>