https://github.com/georggrab/hierarchical-list
Hierarchical List Implementation with React & Redux
https://github.com/georggrab/hierarchical-list
flow immutablejs react redux redux-saga sass
Last synced: 27 days ago
JSON representation
Hierarchical List Implementation with React & Redux
- Host: GitHub
- URL: https://github.com/georggrab/hierarchical-list
- Owner: georggrab
- Created: 2018-04-10T13:15:09.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-04-10T13:59:12.000Z (about 8 years ago)
- Last Synced: 2025-08-31T21:39:15.793Z (9 months ago)
- Topics: flow, immutablejs, react, redux, redux-saga, sass
- Language: JavaScript
- Homepage: https://talkdirty.github.io/hierarchical-list/
- Size: 3 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Hierarchical List
Implementation of a hierarchical list structure in React & Redux.
[Check it out!](https://talkdirty.github.io/hierarchical-list/)
## Features
* Transform recursive input Json into flat immutable data structure
* Expand and collapse subhierarchies
* Reset data
## Technologies used
#### scaffolding
The project was bootstrapped with [create-react-app](https://github.com/facebook/create-react-app).
#### unit tests
Unit tests are executed with [jest](https://facebook.github.io/jest/). For testing the react components, [enzyme](https://github.com/airbnb/enzyme) is used. For testing with redux, [redux-mock-store](https://github.com/arnaudbenard/redux-mock-store) is used.
#### static type checking
Static type checking is provided by [flow](https://flow.org/).
#### state management
State management is provided by [redux](https://redux.js.org/). For organizing the state, the redux [ducks](https://github.com/erikras/ducks-modular-redux) proposal was followed. Immutable data structures courtesy of [immutable.js](https://facebook.github.io/immutable-js/) are used in the store.
#### side effect model
For side effect management [redux-saga](https://github.com/redux-saga/redux-saga) is used. Strictly speaking, this is not required for the project (as the input json is not required to change, we could just import the json through webpack), but I figured loading the json asynchronously makes the project a bit more exciting.
#### css preprocessor
[Sass](https://sass-lang.com/) is used as a CSS preprocessor.
#### isolated component development
[Storybook](https://github.com/storybooks/storybook) is used for isolated component development, though this would not have been strictly necessary, as there are very few components in the App.
## Usage
Nothing out of the ordinary here:
#### Running
```bash
yarn install
yarn start
```
#### Executing Unit tests
```bash
yarn test
```