https://github.com/ederssouza/reactjs-redux-boilerplate
A basic project structure to build React JS apps using Redux.
https://github.com/ederssouza/reactjs-redux-boilerplate
boilerplate coverage coveralls jest react react-boilerplate react-redux reactjs reactredux testing-library typescript
Last synced: about 1 month ago
JSON representation
A basic project structure to build React JS apps using Redux.
- Host: GitHub
- URL: https://github.com/ederssouza/reactjs-redux-boilerplate
- Owner: ederssouza
- License: mit
- Created: 2021-09-26T16:25:22.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-06-10T15:59:53.000Z (almost 2 years ago)
- Last Synced: 2025-03-25T17:13:15.920Z (about 2 months ago)
- Topics: boilerplate, coverage, coveralls, jest, react, react-boilerplate, react-redux, reactjs, reactredux, testing-library, typescript
- Language: TypeScript
- Homepage:
- Size: 665 KB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Redux boilerplate to React JS apps
## Summary
- [About](#about)
- [Built using](#built-using)
- [Project structure](#project-structure)
- [Getting started](#getting-started)
- [Prerequisites](#prerequisites)
- [Installing dependencies](#installing-dependencies)
- [Project setup](#project-setup)
- [Compiles and hot-reloads for development](#compiles-and-hot-reloads-for-development)
- [Compiles and minifies for production](#compiles-and-minifies-for-production)
- [Lints and fixes files](#lints-and-fixes-files)
- [Run your unit tests](#run-your-unit-tests)
- [How to create a reducer?](#how-to-create-a-reducer)
- [Contributing](#contributing)
- [Versioning](#versioning)
- [Authors](#authors)
- [License](#license)
## About
A basic project structure to build React JS apps using Redux.
## Built using
- [React JS](https://reactjs.org): JavaScript library
- [Redux](https://redux.js.org/): A Predictable State Container for JS Apps
- [TypeScript](https://www.typescriptlang.org): JavaScript With Syntax For Types.
- [Jest](https://jestjs.io): JavaScript Testing Framework
- [React Testing Library](https://testing-library.com): Testing utilities
## Project structure
```bash
src
├── components
│ └── Counter
├── hooks
│ └── useCounter
├── redux
│ ├── actions
│ ├── constants
│ ├── reducers
│ ├── selectors
│ └── store
└── tests
└── mocks
```
## Getting started
### Prerequisites
You need to install on your machine [Node.js](https://nodejs.org) or [Yarn](https://yarnpkg.com).
### Installing dependencies
```bash
npm install
# or
yarn install
```
## Project setup
### Compiles and hot-reloads for development
```bash
# start app open development mode
yarn start
# or
npm run start
```
### Compiles and minifies for production
```bash
yarn build
# or
npm run build
```
### Lints and fixes files
```bash
# show errors
yarn lint
# or
npm run lint
# fix errors
yarn lint:fix
# or
npm run lint:fix
```
### Run your unit tests
```bash
# run tests
yarn test
# or
npm run test
# run tests on watch mode
yarn test:watch
# or
npm run test:watch
# run tests on coverage mode
yarn test:coverage
# or
npm run test:coverage
# run tests on coverage with watch mode
yarn test:coverage:watch
# or
npm run test:coverage:watch
```
## How to create a reducer?
As an example, let's implement a counter component reducer. Files are also available in the repository.
Follow the steps below to implement your first reducer.
1. Create action types constants, in the `constants` directory:
```js
// src/redux/constants/counter.ts
export const actionTypes = {
COUNTER_DECREMENT: 'COUNTER_DECREMENT',
COUNTER_INCREMENT: 'COUNTER_INCREMENT'
}
```
2. Create reducer, in the `reducers` directory:
```js
// src/redux/reducers/counter.ts
import { actionTypes } from '../constants/counter'
type Action = {
type: 'COUNTER_DECREMENT' | 'COUNTER_INCREMENT'
}
const INITIAL_STATE = {
counter: 0
}
export const counterReducers = (state = INITIAL_STATE, action: Action) => {
switch (action.type) {
case actionTypes.COUNTER_DECREMENT:
return {
...state,
counter: state.counter - 1
}
case actionTypes.COUNTER_INCREMENT:
return {
...state,
counter: state.counter + 1
}
default:
return state
}
}
```
3. Import reducer on reducers main file:
```js
// src/redux/reducers/index.ts
import { combineReducers } from 'redux'
import { counterReducers } from './counter'
export const reducers = combineReducers({
// ...
counterReducers
})
```
4. Create action types methods, in the `actions` directory:
```js
// src/redux/actions/counter.ts
import { actionTypes } from '../constants/counter'
export const actions = {
decrement: () => ({
type: actionTypes.COUNTER_DECREMENT
}),
increment: () => ({
type: actionTypes.COUNTER_INCREMENT
})
}
```
5. Create selectors, in the `selectors` directory:
```js
// src/redux/selectors/counter.ts
import { RootStateOrAny } from 'react-redux'
export const selectors = {
getCounter: (state: RootStateOrAny) => state.counterReducers.counter
}
```
6. Create a custom hook, in the `hooks` directory:
```js
// src/hooks/useCounter/index.tsx
import { useSelector, useDispatch } from 'react-redux'
import { actions } from '../../redux/actions/counter'
import { selectors } from '../../redux/selectors/counter'
export function useCounter () {
const counter = useSelector(selectors.getCounter)
const dispatch = useDispatch()
const handleDecrement = () => dispatch(actions.decrement())
const handleIncrement = () => dispatch(actions.increment())
return { counter, handleDecrement, handleIncrement }
}
```
7. Import custom hook in the component:
```js
// src/components/Counter/index.tsx
import { useCounter } from '../../hooks/useCounter'
export function Counter () {
const { counter, handleDecrement, handleIncrement } = useCounter()
return (
Counter: {counter}
Decrement
Increment
)
}
```
## Contributing
Please read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/ederssouza/reactjs-redux-boilerplate/tags).
## Authors
See also the list of [contributors](https://github.com/ederssouza/reactjs-redux-boilerplate/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
----
Develop by Eder Sampaio 👋 [See my linkedin](https://www.linkedin.com/in/ederssouza).