Project base
The project was created using create-react-app.
๐ Getting started
Create an empty folder for you project and move to it
mkdir my-app
cd my-app
Generate your boilerplate
npx degit ChristianTracy/cra-redux-boilerplate
mkdir my-app && cd my-app && npx degit ChristianTracy/cra-redux-boilerplate
๐ป Start dev server
Don't forget to install your dependencies first
npm install
npm run start
if you need change something see create-react-app docs.
๐ฅ Testing
Create your files to test with [filename].test.js
inside your modules folders.
The base config for test used by create-react-app
was removed. This project use jest
to test files.
npm test
This command will prompt the test results and the coverage percentage.
๐ ESLint + Prettier
This project contains the basic configuration to use the base airbnb rules. You'll find this inside the .eslintrc.json
file. Feel free to change to use custom rules.
If you use VSCode, install the eslint
and prettier
extensions to format your code on save and get the lint errors inside the editor.
๐ง Project folder structure
โโโ README.md
โโโ node_modules
โโโ package.json
โโโ .gitignore
โโโ public
โ โโโ favicon.ico
โ โโโ index.html
โ โโโ manifest.json
โโโ src
โโโ locales
โ โโโ en.json
โ โโโ es.json
โโโ modules
โโโ home
โ โโโ Home.jsx
โ โโโ HomeActions.js
โ โโโ HomeReducer.js
โ โโโ HomeSelectors.js
โโโ commons
โ โโโ ViewsContainer.js
โโโ store
โ โโโ Store.js
โโโ App.css
โโโ App.js
โโโ App.test.js
โโโ index.css
โโโ index.js
โโโ logo.svg
โโโ registerServiceWorker.js
๐ Libraries included
REDUX:
ROUTER:
UTILS
๐ Redux project conventions
Reducers
- Reducers locations
The reducers files should be located inside the modules/[module_name]/
folders.
- Reducers names
The file name should be created with the name of the module (or not)
+ Reducer
.
E.g: HomeReducer.js
inside modules/home/HomeReducer.js
- Reducers tip
Always use combineReducers
to manage little parts of the store (https://redux.js.org/api/combinereducers);
Actions
- Actions locations
The reducers files should be located inside the modules/[module_name]/
folders.
- Actions names
The file name should be created with the name of the module (or not)
+ Actions
.
E.g: HomeActions.js
inside modules/home/HomeActions.js
- Actions tips
Create your actions using FSA standard : https://github.com/redux-utilities/flux-standard-action
Remember that you're using redux-thunk
in this projects.
Selectors
- Selectors locations
The reducers files should be located inside the modules/[module_name]/
folders.
- Selectors names
The file name should be created with the name of the module (or not)
+ Selectors
.
E.g: HomeSelectors.js
inside modules/home/HomeSelectors.js
- Selectors tips
Selector concept : https://redux.js.org/introduction/learningresources#selectors
If you can, use reselect
(already installed in this project).
๐จ Utils
๐ i18n
Define your texts inside the locales/[language].js
files.
The library used to manage this is react-i18next
.
Use
import { useTranslation } from 'react-i18next';
...
const MyComponent = () => {
const { t, i18n } = useTranslation();
<span>{t('home.text')}</span>
}
...
You can check the complete implementation in modules/home/Home.jsx
๐ฃ๏ธ Router
See the full documentation of used router in react-router and connected-react-router.
You've a redirect example in HomeActions.js
and Home.jsx
files.
export const redirectExample = () => dispatch => {
dispatch(push('/another'))
}
All your views should be placed in commons/ViewsContainer.jsx file
<Switch>
<Route exact path="/" component={Home} />
<Route path="/another" component={Another} />
<Route render={() => <div>DEFAULT</div>} />
</Switch>
โ FAQ's
- Where should I put my bussines logic?
- The selectors are a good place to do that.
- Should I make test for every single reducer an action?
- The tests are awesome. It's a good practice to test all your reducers and actions to avoid problems :)
- I need to add a new view...
- In that case create a component inside a new module like
/modules/about/About.jsx
- The next step will be add your new view in the
modules/commons/ViewsContaines.jsx
.
- In that case create a component inside a new module like