reactnative项目搭建目录结构(配合redux-saga)
目录架构:
/src
——actions
——components(纯组件)
——containers
——constants (常量定义:actions、apiurls)
——reducers
——sagas
——store(配置Store)
——service (api目录)
——root.js
入口文件:index.android.js和index.ios.js,只需要注册一个Root组件:
import {AppRegistry} from 'react-native';
import Root from './src/Root'
AppRegistry.registerComponent('myapp', () => Root);
/src/root.js:配置Store、导出根组件、:
import React from 'react'; import { Provider } from 'react-redux'; import configureStore from './store/configureStore'; import rootSaga from './sagas'; import App from './containers/App'; const store = configureStore(); store.runSaga(rootSaga); const Root = () => ( <Provider store={store}> <App /> </Provider> ) export default Root;
/src/store/configureStore.js:配置store:
import { createStore,applyMiddleware } from 'redux';
import createSagaMiddleware,{ END } from 'redux-saga';
import { createLogger } from 'redux-logger';
import rootReducer from '../reducers';
const middlewares = [];//中间件列表
const sagaMiddleware = createSagaMiddleware();
middlewares.push(sagaMiddleware);
if (__DEV__) {
middlewares.push(createLogger());
}
const initialState = {};//初始化state
export default function configureStore(){
const store = createStore(
rootReducer,
initialState,
applyMiddleware(...middlewares)
);
store.runSaga = sagaMiddleware.run;
store.close = () => store.dispatch(END);
return store;
}
其他:
/src/containers/App.js:存放根组件App
/src/reducers/index.js:导出combineReducers好的rootReducer
/src/sagas/index.js:导出rootRagas
/src/constants/ActonTypes.js :action.type定义
/src/constants/Urls.js :apiurl定义
浙公网安备 33010602011771号