智慧物流>> next-bulma-with-redux-thunk>> 返回
项目作者： louiskhenghao

项目描述 ：
NextJs with Bulma CSS Framework, Redux, Redux Thunk, Selectors, Immutable setup
高级语言： JavaScript
项目地址: git://github.com/louiskhenghao/next-bulma-with-redux-thunk.git


NextJs Starter

A Starter project for nextJs with implementation react, redux, redux-thunk, selectors, immutable and Bulma CSS framework.

Demo

https://codesandbox.io/s/github/louiskhenghao/next-bulma-with-redux-thunk

How to run app

Run development build

  1. yarn
  2. yarn dev

Run production build with:

  1. yarn build
  2. yarn start

Export as static HTML files

  1. yarn build
  2. yarn export
  4. # To try on your local machine
  5. # note: you'll need to install https://github.com/zeit/serve
  6. cd out
  7. serve -p 8080

Folder structure

  1. /config
  2.   - index.js
  3. /components
  4.   - YourDumbComponent.js
  5. /containers
  6.   - /YourSmartComponent
  7.     - component.jsx
  8.     - connector.jsx
  9. /screens
  10.   - /YourScreenComponent
  11.     - index.jsx
  12.     - styles.jsx
  13. /pages
  14.   - YourPage.js
  15. /store
  16.   - YourStoreName
  17.     - actions.js
  18.     - reducers.js
  19.     - selectors.js
  20.   index.js
  21.   RootReducers.js
  22. /styles
  23.   - theme.scss
  24.   - 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/theme.scss - this is the place where we import bulma theme, you can choose to define what you need to use for your application
  • styles/styles.scss - this file is to define global styles for your application

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 @thejasonfile/dumb-components-and-smart-components-e7b33a698d43">this link
  • For redux, please refer this link for introduction and example. In simple redux 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