Merge pull request #14 from Omar-Belghaouti/docs/documentation

Docs: Add docs for new features for redux

README.md

@@ -2,6 +2,9 @@
   <img src="https://user-images.githubusercontent.com/48713070/130338182-bfd64ba3-bdd0-4384-8560-c0c0021a8d02.png" width="350" height="350" alt="react-help-create"/>
 </p>
 <h1 align="center">react-help-create</h1>
+
+<p align="center">Focus on your code, not your project structure!</p>
+
 <p align="center">This command line helps you create components, pages and even redux implementation for your react project.</p>
 
 <p align="center">

bin/create/redux/functions/create-action.js

@@ -16,7 +16,7 @@ const {
 exports.createAction = (actionName, js, ts) => {
   if (actionName.length <= 1) {
     console.log("At least provide one action for a reducer");
-    console.log("Usage: rnhc create --action <reducer-name> <action-name>");
+    console.log("Usage: rhc create --action <reducer-name> <action-name>");
     return;
   }
   const { reduxRoot, applyReduxThunk } = config;

docs/CREATING_FILES.md

@@ -458,6 +458,168 @@ export const mainReducer = combineReducers({
 });
 ```
 
+- ### Reducers
+
+1 - To create a reducer, you must have a redux implementation then run:
+
+```sh
+rhc create --reducer <reducer-name>
+```
+
+### Example
+
+```sh
+rhc create --reducer auth
+```
+
+- This will create a `auth` reducer under the `src/redux/reducers/` folder and the `index.js` for this reducer will contain the same code written in the template.
+
+`src/redux/reducers/auth/index.js`
+
+```js
+const initialState = {};
+
+export const auth = (state = initialState, action) => {
+  switch (action.type) {
+    default:
+      return state;
+  }
+};
+```
+
+- It will also add the reducer to the `index.js` file under the `reducers` folder to use it in the `combineReducers` function.
+
+`src/redux/reducers/index.js`
+
+```js
+import { combineReducers } from "redux";
+import { auth } from "./auth";
+import { general } from "./general";
+
+export const mainReducer = combineReducers({
+  auth,
+  general,
+});
+```
+
+- If you don't have a redux implementation create using `rhc create -r`, this command will prompt:
+
+```sh
+Redux implementation does not exist
+```
+
+- You can also overwrite the reducer by running:
+
+```sh
+rhc create --reducer <reducer-name> -o
+```
+
+2 - To create multiple reducers, you must have a redux implementation then run:
+
+```sh
+rhc create --reducer <reducer-name-1> <reducer-name-2> ...
+```
+
+- This will also update your `index.js` file under the `reducers` folder to use the reducers you created.
+
+- ### Actions
+
+- To create an action, you must have a redux implementation as wee as the reducer you want to add an action for it, then run:
+
+```sh
+rhc create --action <reducer-name> <action-name>
+```
+
+### Example
+
+- In this example we are going to create an action for the `auth` reducer, so we will run:
+
+```sh
+rhc create --action auth login
+```
+
+- This will create a `login` action under the `src/redux/actions/auth/` folder and the `login.js` for this action will contain the same code written in the template.
+
+`src/redux/actions/auth/login.js`
+
+```js
+export const loginAction = () => async (dispatch, getState) => {
+  dispatch({ type: "AUTH_LOGIN", payload: {} });
+};
+```
+
+- And it will update the `index.js` file under `src/redux/actions/auth/` to export the action.
+
+`src/redux/actions/auth/index.js`
+
+```js
+export { loginAction } from "./login";
+```
+
+2 - To create multiple actions, you must have a redux implementation and existed reducer, then run:
+
+```sh
+rhc create --action <reducer-name> <action-name-1> <action-name-2> ...
+```
+
+- If the reducer doesn't exist, you will get an error like this:
+
+```sh
+./src/redux/reducers/x does not exist
+```
+
+- Keep in mind that this also works for TypeScript projects. Even better when creating an action for a reducer in TypeScript, you will get TypeScript support as well as updating the `ActionType` in the `src/redux/index.ts` file. For example if you create an action for the `auth` reducer, you will get the following:
+
+`src/redux/index.ts`
+
+```ts
+import { applyMiddleware, compose, createStore } from "redux";
+import thunk, { ThunkAction, ThunkDispatch } from "redux-thunk";
+
+import { mainReducer } from "./reducers";
+
+/**
+ * the main redux state, with all the reducers
+ */
+export const mainStore = createStore(
+  mainReducer,
+  compose(applyMiddleware(thunk))
+);
+
+/**
+ * Creates a new redux state each time this function is called, this is used only for unit tests, to ensure that we have fresh state on each individual test
+ */
+export const createMainStore = () => {
+  return createStore(mainReducer, compose(applyMiddleware(thunk)));
+};
+
+export type StateInterface = ReturnType<typeof mainStore.getState>;
+
+/**
+ * list of action types
+ */
+export type ActionType = "AUTH_LOGIN" | "UPDATE_GENERAL";
+
+export interface Action<T> {
+  type: ActionType;
+  payload: Partial<T>;
+}
+export type ThunkResult<
+  A = Record<string, unknown>,
+  E = Record<string, unknown>
+> = ThunkAction<void, StateInterface, E, Action<A>>;
+
+export type Dispatch<A> = ThunkDispatch<
+  StateInterface,
+  Record<string, unknown>,
+  Action<A>
+>;
+```
+
+- It will also update the necessary files that imports and exports modules in order to use the action in the reducer.
+
+- Also another note, if you prefer not using `redux-thunk` you can set that in `rhc.config.json` file, this will let you create your store and actions without applying the `redux-thunk` middleware (For more details check [configuration section](#configuration)).
+
 ## Configuration
 
 With the above steps, you can now create a configuration file which will be used by `rhc` to create your files with your custom config.
@@ -478,7 +640,8 @@ rhc create --config
   "defaultExports": true,
   "componentsRoot": "./src/components",
   "pagesRoot": "./src/pages",
-  "reduxRoot": "./src/redux"
+  "reduxRoot": "./src/redux",
+  "applyReduxThunk": true
 }
 ```
 
@@ -489,5 +652,6 @@ rhc create --config
 5. `componentsRoot`: the root folder for components, default is `./src/components`.
 6. `pagesRoot`: the root folder for pages, default is `./src/pages`.
 7. `reduxRoot`: the root folder for redux, default is `./src/redux`.
+8. `applyReduxThunk`: if true, apply `redux-thunk` middleware to the store, if false, don't apply `redux-thunk` middleware, default is true.
 
 - If no configuration file is found or you don't specify some of the configuration, the default configuration will be used.

docs/DELETING_FILES.md

@@ -84,6 +84,62 @@ rhc delete -r
 src/redux/ does not exist
 ```
 
+- ### Reducers
+
+1 - To delete a reducer run:
+
+```sh
+rhc delete --reducer <reducer-name>
+```
+
+- This will delete the existed reducer under `src/redux/reducer/` folder, if not `rhc` will prompt the following:
+
+```sh
+./src/redux/reducers/<reducer-name>/ does not exist
+```
+
+- It will also update the `index.js` file under `src/redux/reducer/` folder to remove it from the import list as well as from the `combineReducers` function.
+
+2 - You can even delete multiple reducers at once:
+
+```sh
+rhc delete --reducer <reducer-name-1> <reducer-name-2> ...
+```
+
+3 - To delete all reducers run:
+
+```sh
+rhc delete --reducer
+```
+
+- ### Actions
+
+1 - To delete an action run:
+
+```sh
+rhc delete --action <reducer-name> <action-name>
+```
+
+- If the reducer does not exist, `rhc` will prompt the following:
+
+```sh
+./src/redux/actions/<reducer-name>/ does not exist
+```
+
+- It will also update the necessary files to remove the action from the reducer. And in case of TypeScript projects it will remove the action type in the `src/redux/index.ts`.
+
+2 - You can even delete multiple actions for a specific reducer at once:
+
+```sh
+rhc delete --action <reducer-name> <action-name-1> <action-name-2> ...
+```
+
+3 - To delete all actions for a specific reducer run:
+
+```sh
+rhc delete --action <reducer-name>
+```
+
 ## Configuration
 
 - To delete a configuration file run:

docs/NOTES.md

@@ -31,3 +31,9 @@ rhc create -p test-page --ts
 ```sh
 rhc create -p world-to-react
 ```
+
+- When creating reducers you should have already a redux implmentation created with `rhc create -r` so it can work.
+
+- When creating actions, you should have already a redux implementation created with `rhc create -r` as well as an existed reducer with `rhc create --reducer <reducer-name>` so it can create actions for that specific reducer.
+
+- Creating and deleting reducers and actions will not just delete files, but also update other files that depends on them under the `src/redux/` folder (Or your specified path for the root of redux folder in `rhc.config.json`).

docs/TOC.md

@@ -6,11 +6,15 @@
    - [Pages](./CREATING_FILES.md#pages)
    - [Using templates](./CREATING_FILES.md#templates)
    - [Redux](./CREATING_FILES.md#redux)
+   - - [Redux reducers](./CREATING_FILES.md#reducers)
+   - - [Redux actions](./CREATING_FILES.md#actions)
    - [Using configuration](./CREATING_FILES.md#configuration)
 3. [Deleting Files](./DELETING_FILES.md)
    - [Components](./DELETING_FILES.md#components)
    - [Pages](./DELETING_FILES.md#pages)
    - [Redux](./DELETING_FILES.md#redux)
+   - - [Redux reducers](./DELETING_FILES.md#reducers)
+   - - [Redux actions](./DELETING_FILES.md#actions)
    - [Configuration](./DELETING_FILES.md#configuration)
 4. [Combining Files](./COMBINING_FILES.md)
    - [Components](./COMBINING_FILES.md#components)