react native redux學習
1.action
進行一定的邏輯,並將處理後的結果,使用dispatch以type的形勢傳遞出去,結果在reduce裡面處理結果
2.reducers
接受action裡面傳出的type,根據type的型別更改state的值並將值返回給
3.store
進行配置store,在程式的入口中呼叫,呼叫後reduce更新的state就會傳送到store中
store會更具傳回的state改變頁面顯示
使用:在需要使用的頁面中使用react-redux中的connect與store進行連線,
/***在select中設定需要的state
**/function select(store)
}//頁面與store鏈結
export default connect(select)(main);
使用步驟:
1.在專案中匯入包
1>.匯入react-redux
2>匯入redux
3>匯入redux-thunk
4>匯入redux-persist
2.建立檔案目錄
redux中使用的:
1>.actions
2>.store
3>.reducers
3.建立相關檔案
1>.在store目錄下建立index.js
import thunk from 'redux-thunk';
import from 'redux-persist';
import from 'react-native';
import reducers from '../reducers';
const logger = store => next => action =>
let middlewares = [
logger,
thunk
];export default function configurestore(oncomplete: ()=>void);
persiststore(store, opt, oncomplete);
return store;}
2.建立入口檔案,入口檔案中使用react-redux中的provider,在provider中使用store
import react, from 'react';
//匯入provider
import from 'react-redux';
//匯入store中的configurestore
import configurestore from './store/index';
let store = configurestore();
import root from './root';
super();
this.state = )})
}
render()/**
**使用store
***/
return (
)
}3.建立action
建立action檔案
import * as types from './types';
// fake user data
let testuser = ;
// for skip user
let skipuser = ;
// login
export function login(opt));
let inner_get = fetch('')
.then((res)=>);
}).catch((e)=>);
});}
}// skip login
export function skiplogin()
}// logout
export function logout()
}4.在頁面js中呼叫action
//將action匯入頁面,就可以從頁面檔案中使用action中的方法
import from '../actions/user';
reduce執行路線
配置store-->入口使用store
頁面中呼叫action->action將type發出去間接呼叫reduce->頁面中使用connect將頁面的state和store
目前我對ReactNative的了解
1 什麼是react?乙個js元件庫，不同於angular的是乙個完整的framework，react需要像jquery一樣寫事件監聽邏輯，最大特點是virtual dom。官網 2 什麼是react native?2.1 什麼事react native 乙個在基本react庫和語法上增加對原生io...
React Native中的flexbox布局
分類 react native 說到布局，不論是android還是ios還是web前端，都有涉及到，react native中也有布局，主要採用了類似css中的flexbox布局，不過這種布局跟css中的flexbox布局稍微有點不同，下面就記錄在react native中使用flexbox布局的方...
react native開發中的 gradle命令
gradle 命令之 stacktrace info debug 用法 faq run with stacktrace option to get the stack trace.run with info or debug option to get more log output.try run...