/redux-practice

Primary LanguageJavaScriptMIT LicenseMIT

Redux Practice

Table of contents

Project structure

Installation

Configuration

Technologies used

Project structure

build/
src/
|- index.jsx _______________________________ # Application entry 
|- App.jsx _________________________________ # Application init
|  |- API/ _________________________________ # API  
|    |- Models
|       |- Offer.js ________________________ #Modeling the required data from API
|  |- Assets/ ______________________________ # contain all icons and images
|    |- icons // Icons folder
|  |- Components/ __________________________ # presentational components
|    |- Error/ Error handling
|       |- index.jsx _______________________
|       |- error.scss ______________________ # component styling 
|    |- Offer/ offer view 
|       |- index.jsx _______________________
|       |- offer.scss ______________________ # component styling 
|    |- Search/ search input 
|       |- index.jsx _______________________
|       |- search.scss _____________________ # component styling 
|    |- Sort/ Sorting buttons
|       |- index.jsx _______________________
|       |- sort.scss _______________________ # component styling 
|  |- Containers/ __________________________ # API  
|    |- Offers
|       |- index.jsx _______________________ # Offers component responsable to connect with Redux and parsing the data to the presentational components
|       |- offers.scss _____________________ # component styling 
|  |- Store/ _______________________________ # Redux Store  
|    |- Actions
|       |- offersActions.js ________________ # Redux actions 
|       |- Types.js ________________________ # Redux Types
|    |- Reducers
|       |- offersReducers.js _______________ # Redux reducers 
|       |- index.js ________________________ # Combining redux reducers
|    |- Selectors
|       |- index.js ________________________ # Handling Memoization for offers and sorting



webpack
|- paths.js ________________________________ # webpack paths needed
|- webpack.common.js _______________________ # common webpack config
|- webpack.dev.js __________________________ # development config
|- webpack.prod.js _________________________ # production config

Installation

1- Clone the boilerplate repo

git clone git@github.com:HashemKhalifa/redux-practice.git

2- yarn or npm install to install npm packages

3- start dev server using yarn start or npm start.

3- build and bundling your resources for production yarn build.

4- Unit testing will watch all your changes in the test files as well as create coverage folder for you. yarn test

Configuration

  • Webpack Config paths based on your file structure you can go to webpack/paths.js and modify the source and file names based on your need.
  • webpack/webpack.common.js config common webpack for both dev and production environments.
  • webpack/webpack.dev.js config webpack for dev environment.
  • webpack/webpack.prod.js config webpack for production environment.
  • /webpack.config.js main webpack config that merge common and webpack environment based config.
  • Enzyme config /setupTest.js here you will have all setup for enzyme to test your component.
  • Prettier config /.prettierc.
  • Browsers list config /.browserslistrc.

Technologies used