A Starter project for
nextJs
with implementation react, redux, redux-thunk, selectors, immutable and Bulma CSS framework.
https://codesandbox.io/s/github/louiskhenghao/next-bulma-with-redux-thunk
yarn
yarn dev
yarn build
yarn start
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
/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 forDumb Component
, (Dumb components are also called ‘presentational’ components because their only responsibility is to present something to the DOM.)containers
folder is the place forSmart 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 amypages.js
file underpages
, so to access this page i just go tohttps://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 differentmodule
, and eachmodule
it should haveactions.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 fromredux store modules
(Remember to importreducer
toRootReducers
when adding newstore
). Please be caution for clashing store name.styles/theme.scss
- this is the place where we import bulma theme, you can choose to define what you need to use for your applicationstyles/styles.scss
- this file is to define global styles for your application
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
andSmart component
please refer this link - For
redux
, please refer this link for introduction and example. In simpleredux
can be described in three fundamental principles: [Single source of truth
], [State is read-only
], [Changes are made with pure functions
] - For
selectors
, please refer this link for better understanding or its github - For
redux thunk
please refer github for examples and explanation. - For
immutableJS
please refer to official documentation