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定義