对React Native中Reduce理解

React Native Redux学习

1.action@H_404_3@进行一定的逻辑,并将处理后的结果,使用dispatch以type的形势传递出去,结果在reduce里面处理结果@H_404_3@2.reducers@H_404_3@接受Action里面传出的type,根据type的类型更改state的值并将值返回给@H_404_3@3.store@H_404_3@进行配置store,在程序的入口中调用,调用后reduce更新的state就会传送到store中@H_404_3@store会更具传回的state改变页面显示@H_404_3@使用:@H_404_3@在需要使用的页面中使用react-redux中的connect与store进行连接,

/**@H_404_3@*在select中设置需要的state@H_404_3@**/@H_404_3@function select(store){@H_404_3@ return {

isLoggedIn: store.userStore.isLoggedIn,user: store.userStore.user,

}@H_404_3@}@H_404_3@//页面与store链接@H_404_3@export default connect(select)(Main);

使用步骤:@H_404_3@1.在项目中导入包@H_404_3@1>.导入react-redux@H_404_3@2>导入redux@H_404_3@3>导入redux-thunk@H_404_3@4>导入redux-persist@H_404_3@2.创建文件目录@H_404_3@redux中使用的:@H_404_3@1>.actions@H_404_3@2>.store@H_404_3@3>.reducers

3.创建相关文件

1>.在store目录下创建index.js

import { applyMiddleware,createStore } from 'redux';
import thunk from 'redux-thunk';
import { persistStore,autoRehydrate } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import reducers from '../reducers';

const logger = store => next => action => {
  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
];

let createAppStore = applyMiddleware(...middlewares)(createStore);

export default function configureStore(onComplete: ()=>void){
  const store = autoRehydrate()(createAppStore)(reducers);
    let opt = {
      storage: AsyncStorage,transform: [],//whitelist: ['userStore'],};
  persistStore(store,opt,onComplete);
  return store;
}

2.创建入口文件,入口文件中使用react-redux中的Provider,在Provider中使用store

import React,{ Component } from 'react';@H_404_3@//导入provider@H_404_3@import { Provider } from 'react-redux';@H_404_3@//导入store中的configureStore@H_404_3@import configureStore from './store/index';

let store = configureStore();

import Root from './root';

export default class App extends Component{@H_404_3@ constructor(){

super();
  this.state = {
    isLoading: true,store: configureStore(()=>{this.setState({isLoading: false})})
  }

}@H_404_3@ render(){

if(this.state.isLoading){
    console.log('loading app');
    return null;
  }

/**@H_404_3@*@H_404_3@*使用store@H_404_3@*@H_404_3@**/

return (
    <Provider store={this.state.store}>
        <Root />
    </Provider>
  )

}@H_404_3@}

3.创建Action@H_404_3@ 创建action文件

import * as TYPES from './types';

// fake user data@H_404_3@let testUser = {@H_404_3@ 'name': 'juju',@H_404_3@ 'age': '24',@H_404_3@ 'avatar': 'https://avatars1.githubuserco...'@H_404_3@};

// for skip user@H_404_3@let skipUser = {@H_404_3@ 'name': 'guest',@H_404_3@ 'age': 20,@H_404_3@ 'avatar': 'https://avatars1.githubuserco...',@H_404_3@};

// login@H_404_3@export function logIn(opt){@H_404_3@ return (dispatch) => {

dispatch({'type': TYPES.LOGGED_DOING});
  let inner_get = fetch('http://www.baidu.com')
    .then((res)=>{
        dispatch({'type': TYPES.LOGGED_IN,user: testUser});
    }).catch((e)=>{
        AlertIOS.alert(e.message);
        dispatch({'type': TYPES.LOGGED_ERROR,error: e});
    });

}@H_404_3@}

// skip login@H_404_3@export function skipLogin(){@H_404_3@ return {

'type': TYPES.LOGGED_IN,'user': skipUser,

}@H_404_3@}

// logout@H_404_3@export function logout(){@H_404_3@ return {

'type': TYPES.LOGGED_OUT

}@H_404_3@}

4.在页面js中调用action

//将action导入页面,就可以从页面文件中使用action中的方法@H_404_3@import { logIn,skipLogin } from '../actions/user';

reduce运行路线@H_404_3@配置store-->入口使用store

页面中调用action->action将type发出去间接调用reduce->页面中使用connect将页面的state和store

对React Native中Reduce理解

猜你在找的React相关文章