https://github.com/louiskhenghao/next-antd-with-redux
NextJs with Ant Design, Redux, Redux Thunk, Selectors, Immutable setup
https://github.com/louiskhenghao/next-antd-with-redux
ant-design antd boilerplate immutablejs nextjs nextjs-starter react-redux reactjs redux redux-thunk reselect selectors starter-app starter-project
Last synced: about 1 month ago
JSON representation
NextJs with Ant Design, Redux, Redux Thunk, Selectors, Immutable setup
- Host: GitHub
- URL: https://github.com/louiskhenghao/next-antd-with-redux
- Owner: louiskhenghao
- Created: 2018-11-22T07:33:40.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-11-22T07:43:27.000Z (over 6 years ago)
- Last Synced: 2025-03-28T01:04:44.103Z (about 2 months ago)
- Topics: ant-design, antd, boilerplate, immutablejs, nextjs, nextjs-starter, react-redux, reactjs, redux, redux-thunk, reselect, selectors, starter-app, starter-project
- Language: JavaScript
- Size: 118 KB
- Stars: 2
- Watchers: 3
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NextJs Starter
> A Starter project for `nextJs` with implementation [ant design framework](https://ant.design/), redux, redux-thunk, selectors, immutable and .
## How to run app
### Run development build
```bash
yarn
yarn dev
```
### Run production build with:
```bash
yarn build
yarn start
```
### Export as static HTML files
```
yarn build
yarn export
# To try on your local machine
# note: you'll need to install https://github.com/zeit/serve
cd out
serve -p 8080
```
# Folder structure
```
/config
- index.js
/components
- YourDumbComponent.js
/containers
- /YourSmartComponent
- component.jsx
- connector.jsx
/screens
- /YourScreenComponent
- index.jsx
- styles.jsx
/pages
- YourPage.js
/store
- YourStoreName
- actions.js
- reducers.js
- selectors.js
index.js
RootReducers.js
/styles
- theme.scss
- styles.scss
```
- `components` folder is the place for `Dumb Component`, (Dumb components are also called ‘presentational’ components because their only responsibility is to present something to the DOM.)
- `containers` folder is the place for `Smart Component`, (Smart components (or container components) on the other hand have a different responsibility. Because they have the burden of being smart, they are the ones that keep track of state and care about how the app works.)
- `pages` folder is the place for pages to be served, by default nextJs will consume the js file as page route, (Example: there is a `mypages.js` file under `pages`, so to access this page i just go to `http://localhost:3000/mypages`)
- `screens` folder is the place for pages component, each page component will have a component and its styles, the purpose to having these due to some people would love to seperate style and component in different files **_(This is optional)_**
- `store` folder as the folder name, it is for redux store, we encourage developer to seperate their store to different `module`, and each `module` it should have
- `actions.js` - Actions are payloads of information that send data from your application to your store. They are the only source of information for the store.
- `reducers.js` - Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes.
- `selectors.js` - Selectors are functions that take Redux state as an argument and return some data to pass to the component.
- `store/RootReducers.js` - Combine of reducers from `redux store modules` (Remember to import `reducer` to `RootReducers` when adding new `store`). **_Please be caution for clashing store name._**
- `styles/styles.scss` - this file is to define global styles for your application
- `styles/theme.less` - this is the place where we import ant design theme
- `styles/variables.less` - this is the place for overriding ant design less variables
## References
For anyone who would like to have better understanding please refer to the reference below:
- For anyone who would like to have a better understanding of `Dumb component` and `Smart component` please refer [this link](https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43)
- For `redux`, please refer [this link](https://redux.js.org/) for introduction and example. In simple `redux` can be described in three [fundamental principles](https://redux.js.org/introduction/three-principles): [`Single source of truth`], [`State is read-only`], [`Changes are made with pure functions`]
- For `selectors`, please refer [this link](https://redux.js.org/recipes/computing-derived-data) for better understanding or its [github](https://github.com/reduxjs/reselect)
- For `redux thunk` please refer [github](https://github.com/reduxjs/redux-thunk) for examples and explanation.
- For `immutableJS` please refer to [official documentation](https://facebook.github.io/immutable-js/)