reactnative项目搭建目录结构(配合redux-saga)

时间:2022-12-28 10:36:11

目录架构:

/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定义