当前位置：首页 > news >正文

安徽省建设干部学校网站/长春seo关键词排名

news 2025/8/4 5:14:57

安徽省建设干部学校网站,长春seo关键词排名,计算机网站建设是什么意思,网站设计配色怎么做关于React redux概念性的东西可以阅读Redux中文文档和阮一峰老师的redux入门教程，但是实践出真知，所以上手才是最重要的，下面就是基于redux的实现，请看截图：http://blog.csdn.net/sinat_17775997/article/details/7086…

关于React redux概念性的东西可以阅读Redux中文文档和阮一峰老师的redux入门教程，但是实践出真知，所以上手才是最重要的，下面就是基于redux的实现，请看截图：http://blog.csdn.net/sinat_17775997/article/details/70861065

分两块描述，先说登陆，登陆的时候，我们需要拿到登陆信息，也就是token，然后在获取购物车相关信息的时候带上token去请求数据，

购物车，我们需要实时的改变购物车的数量，使得下方购物车数量显示正确，当然上面的截图只是拿到了数量，但是没显示到下方的导航栏上，自己加上即可，比较简单

先分析需求，登陆时调接口，拿到token值，加载图相应显示与隐藏，登陆成功跳转到首页(其他页面一样)，保存token值

在login.js文件中，当用户点击登陆时走对应的方法，我这里拟定是buttonRegisterOrLoginAction方法，下面截图：

[html] view plaincopy  
 import {performLoginAction} from '../../actions/LoginAction'  
 //用户登录/注册  
 buttonRegisterOrLoginAction(position) {  
     const {navigator, dispatch} = this.props;  
     if (position === 0) {  
         //用户登录  
         if (username === '') {  
             toastShort('用户名不能为空～');  
             return;  
         }  
         if (password === '') {  
             toastShort('密码不能为空～');  
             return;  
         }  
         //调用登陆接口，获取token，并保持状态  
         dispatch(performLoginAction(username, password));  
     } else if (position === 1) {  
         //用户注册  
     }  
 }  

判断完不能为空，从props中拿到dispatch，分发到相应的action，并把参数传入，在action里面，我们做网络请求以及逻辑处理，

[javascript] view plaincopy  
 export function performLoginAction(username, password) {  
     return (dispatch) => {  
         dispatch(performLogin());  
         fetch(HOST+LOGIN+'?username='+username + '&password='+password)  
             .then((response) => response.json())//取数据  
             .then((responsetext) => {  
                 if (responsetext.result === 1) {  
                     //登录成功..  
                     toastShort('登陆成功～');  
                     dispatch(receiveLoginResult(responsetext))  
   
                 } else {  
                     dispatch(errorLogin())  
                     toastShort(responsetext.msg);  
                 }  
             }).catch((error) => {  
             toastShort('登陆错误～');  
             //toastLong(error)  
         });  
     }  
 }  

这里我是用的get请求，将参数拼接到url里面，当开始登陆，分发相应的action，并根据返回的result判断是否登陆成功，下面是表明3种状态的方法：

[html] view plaincopy  
 //登陆失败  
 function errorLogin() {  
     return {  
         type: types.ERROR_LOGIN_ACTION, //自己定义的常量，已区分不同action  
     }  
 }  
 //开始登陆  
 function performLogin() {  
     return {  
         type: types.PERFORM_LOGIN_ACTION,  
     }  
 }  
 //登陆成功  
 function receiveLoginResult(result) {  
     return {  
         type: types.RECEIVE_LOGIN_ACTION,  
         data: result.data  
     }  

根据不同的结果分发不同的type和data给reducer处理

在loginReducer里面是对不同store的处理：

[javascript] view plaincopy  
 const initialState = {  
     isLogin:false,  
     loading : false,  
     data:[],  
     status:null  
 }  
   
 export default function login(state = initialState, action){  
     switch (action.type) {  
         case types.PERFORM_LOGIN_ACTION:    //开始登陆  
                   return {  
                       ...state,  
                       state:'doing',  
                       loading: true,  
                       isLogin:false  
                   };  
         case types.ERROR_LOGIN_ACTION:      //登陆失败  
             return {  
                 ...state,  
                 state:null,  
                 loading: false,  
                 isLogin:false  
             };  
         case types.RECEIVE_LOGIN_ACTION:    //完成登陆  
                   return  {  
                       ...state,  
                       state:'done',  
                        loading: false,  
                        data: action.data,  
                        isLogin:true  
                   };  
         default:  
             return state;  
     }  
 }  

首先初始化各种属性，然后根据action.type来判断不同的事件，给相应的属性赋值，当开始登陆的时候，加载图开始显示，登陆失败或者登陆完成加载图隐藏，登陆成功，获得返回的数据，并且把isLogin变为true，

在 reducer.js里面把loginReducer加到里面

[html] view plaincopy  
 import {combineReducers} from 'redux';  
 import login from './LoginReducer';  
 import goods from './GoodsReducer';  
   
 const rootReducer = combineReducers({  
     login,  
     goods  
 })  
 export default rootReducer;  

最后在login.js里面，render里，做相应的操作，使加载图正确显示

[html] view plaincopy
render() {  
    let {login} = this.props;  
    console.log(login)  
    return (      
    <View >  
    //相应的布局  
    <Loading visible={login.loading}/>  
    </View>

这里获取的属性里面的login 要用let，不要用const ，因为我们的加载图需要多次修改状态，

在componentDidUpdate方法里面，我们做相应的跳转操作，单词不要打错，否则很尴尬，这个方法是当组件接受到新的属性和状态改变调用，切绘制完毕，这点很重要，否则我们的加载图会转个不停，具体的组件生命周期在这里，react native组件的生命周期

在compomentDidUpdate里是跳转到主页面，由于chrome一直崩溃，就不发这段代码了，最后在login.js下面还需要这个方法：

[html] view plaincopy
function mapStateToProps(state) {  
    const {login} = state;  
    return {  
        login  
  
    }  
}  
export default connect(mapStateToProps)(Login);  
将我们store里面存储的login和Login.js绑定，以便我们方便的获得更改后的数据

至此登陆的逻辑差不多就走通了，购物车的逻辑和登陆的大部分相似，可以自己看代码理解，大部分都有注释，比较好理解，

最后是app的入口，在不同的系统上运行会跑相应系统的,js文件，所以在里面统一处理，统一入口，

如在index.Android.js文件中:

import React, {Component} from 'react';
import {AppRegistry,
} from 'react-native';
import root from './App/root';AppRegistry.registerComponent('Demo', () => root);

统一交由root.js处理，在index.ios.js文件中做相同的操作

在入口组件root.js，把redux导入

[html] view plaincopy  
 mport React, { Component } from 'react';  
 import {  
 } from 'react-native';  
 import {Provider} from 'react-redux'  
 import configureStore from './store/configstore'  
 const store=configureStore();  
 import App from './app'  
 import Guide from './guide'  
 export default class rootApp extends Component {  
     render() {  
         return (  
             <Provider store={store} >  
             <App/>  
             </Provider>  
         );  
     }  
 }  

并配置我们的store，并使用redux-thunk作为middlewares，这里使用了redux-persist将store保存到本地，方便保存登陆信息

[html] view plaincopy  
 import{createStore,applyMiddleware}from 'redux'  
 import thunk from 'redux-thunk'  
 import {persistStore,autoRehydrate} from 'redux-persist'    //将store保存到本地，保存登陆信息  
 import {AsyncStorage} from 'react-native'  
 import rootReducer from'../reducers/index'  
 const logger=store=>next=>action=>{     //logger  
     if(typeof action==='function') console.log('dispatching a function');  
     else console.log('dispatching',action);  
     let result=next(action)  
     console.log('next state',store.getState)  
     return result;  
   
 }  
 let middlewares=[logger,thunk]  
   
 const creatStoreWithMiddleware=applyMiddleware(...middlewares)(createStore);  
   
 // export default function configStore(initiaState) {  
 //     const store=creatStoreWithMiddleware(rootReducer,initiaState)  
 //     return store;  
 // }  
 export default function configStore(onComplete:()=>void) {  
     const store=autoRehydrate()(creatStoreWithMiddleware)(rootReducer)  
     let opt={  
         storage:AsyncStorage,  
         transform:[]  
     }  
     persistStore(store,opt,onComplete)  
     return store;  
 }  