Rekit doesn't wrap or change any API of React, Redux or React router. But just creates apps following general best practices and provides tools to manage the projects. So there are no new concepts(maybe except feature) in the project. If you can understand React, Redux and React router, you can understand Rekit projects easily.
Below is just the description about how those concepts are used or managed by Rekit.
Feature is the top level concept of a project, and it's the core concept of Rekit. A feature is actually a natural way to describe some capability of an application. For example, an e-shop application usually contains below features:
customer: manage basic customer information.
product: manage products on sale.
category: manage product categories.
order: manage sales orders.
user: manage admins of the system.
A feature usually always contains multiple actions, components or routing rules. A Rekit application always consists of multiple features. By this approach, a large application could always be divided into multiple small, well-decoupled, understandable features.
There are two default features created automatically for a new Rekit application:
- common: it's the place you put all cross-feature elements such as components, actions, etc. In Rekit 1.0, there was a
componentsfolder outside of all features where you put common components. Now they are expected to be put in
commonfeature in Rekit 2.0. This change reduces the number of conepts and makes the folder structure more simple and consistent.
- home: the base feature of the project and the start point of the application. Usually the most basic functionality is put here, such as the overall layout container, fundamental application logic, etc.
However this is just the way recommended by Rekit. Don't hesitate to rename or delete the default features if you want.
To get a quick feel on feature concept, you can look at the Rekit portal live demo: https://rekit-portal.herokuapp.com.
See more instroduction about feature concept in the chapter: feature oriented architecture.
It's just React component. According to Redux, components could be divided into two categories:
presentational. You can create them with Rekit easily:
rekit add component home/Comp [-c]
-c flag indicates it's a container component, otherwise a presentational one. Rekit will use different template to generate the component.
To use the component with React router, that is a component is represented on some url pattern, Rekit allows to specify a
rekit add component home/Page1 -u page1
This will define a React router rule in the
route.js file under the feature folder. Then you can access the component at http://localhost:6075/home/page1.
It's just Redux action. There are two types of actions: sync and async. As described in Redux's doc, async action isn't actually a new concept but describes a work flow of async operations.
By default Rekit uses
redux-thunk for async actions. When creating an async-action, Rekit creates the code boilerplate to handle request begin, request pending, request success, request failure action types. And maintains the
requestError state in the reducer. With the below command line tool, it automatically creates the boilerplate of an async action and you only need to fill the application logic in different technical artifacts:
rekit add action home/doRequest [-a]
-a flag indicates if it's an async action, otherwise a sync action.