We have a web app with frontend on React. I would like to add a subdomain for a second type of users, with limited access and features. This second type of users is a different entity so managing ‘Roles’ or ‘Authority’ is not going to work.
Furthermore, for this subdomain I would like to create a different store with a limited number of reducers.
Here is a chunk of code from the current index.js:
const createStoreWithMiddleware = applyMiddleware(
LoadingMiddleware,
ReduxPromise,
CallbackMiddlware,
ErrorHandlerMiddleware,
NotificationMiddlware,
ReduxThunk
)(createStore)
const store = createStoreWithMiddleware(reducers)
const token = cookie.load('token')
if (token) {
store.dispatch({type: AUTH_USER})
}
// ========================================
ReactDOM.render(<Provider store={store}>
<Router history={history}>
<ScrollToTop/>
<App/>
</Router>
<Alert stack={{limit: 3, spacing: 10}}/>
</Provider>,
document.getElementById('root')
)
Update 1: By “sub-domain” I mean something like: user.myapp.com as compared to main domain as myapp.com
Update 2: To be more specific, how can/should I serve a different App based on the subdomain?
I’ve checked several tutorials but still not sure what is the correct approach.
Vitalie Rotaru is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
3
Now, if you want to have a subdomain—as would be the case in this example—with a different store and likely different views, you can do it in a couple of ways. Here is one well-structured approach towards the solution using React and Redux:
- Routing and Subdomain Handling
You need to handle routing based on the subdomain; user.myapp.com should get routed. This part generally involves server-side configuration so that requests get routed appropriately to your React application.
Configuring the Server: Ensure that requests to user.myapp.com are passed to the same React appl as myapp.com, but distinguished in application-logic by subdomain.
2. Configuration of the Redux Shop
As you would like to have another store with a subset of reducers for the subdomain of the users:
Separate store configuration: Change your existing Redux store setup to hold multiple stores. You will be able to create a different store conditionally and use that store according to the sub-domain.
Here’s how you can modify your index.js:
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import { Router } from 'react-router-dom';
import ReactDOM from 'react-dom';
import history from './history'; // Ensure you have history set up for Router
import reducers from './reducers'; // Your combined reducers
import App from './App'; // Your main App component
const createStoreWithMiddleware = applyMiddleware(
LoadingMiddleware,
ReduxPromise,
CallbackMiddlware,
ErrorHandlerMiddleware,
NotificationMiddlware,
ReduxThunk
)(createStore);
// Function to create a store with specific reducers
const createCustomStore = () => {
// Define reducers specific to the subdomain
const customReducers = {
// Add your specific reducers here
// Example: user: userReducer
};
// Create store with custom reducers
return createStoreWithMiddleware(combineReducers({
...reducers, // Your main reducers
...customReducers
}));
};
const token = cookie.load('token');
let store;
if (token) {
store = createStoreWithMiddleware(reducers);
} else {
// Create a different store for users without token
store = createCustomStore();
}
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<ScrollToTop/>
<App/>
</Router>
<Alert stack={{limit: 3, spacing: 10}}/>
</Provider>,
document.getElementById('root')
);- Component-Based Rendering
You can conditionally render elements in your React components, or routes in the App, based on whether the user is on the subdomain or not. You could do it based on the URL of any other context available to the application.
Yashodhan Advankar is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.