An open API service indexing awesome lists of open source software.

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: 20 days ago
JSON representation

A basic project structure to build React JS apps using Redux.

Awesome Lists containing this project

README

        


Redux boilerplate to React JS apps



Build Status


Coverage Status


Coverage Status

## 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).