Merge dev to master (#28)

2.0 Release

Author: BenLorantfy

.github/workflows/ci.yml

@@ -0,0 +1,48 @@
+name: CI
+on: [pull_request]
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache dependencies
+        id: cache-dependencies
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-cache-dependencies-${{ hashFiles('package-lock.json') }}
+      - name: Install dependencies
+        if: steps.cache-dependencies.outputs.cache-hit != 'true'
+        run: npm install
+      - name: Run Tests
+        run: npm run test
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache dependencies
+        id: cache-dependencies
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-cache-dependencies-${{ hashFiles('package-lock.json') }}
+      - name: Install dependencies
+        if: steps.cache-dependencies.outputs.cache-hit != 'true'
+        run: npm install
+      - name: Run Build
+        run: npm run build
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Cache dependencies
+        id: cache-dependencies
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-cache-dependencies-${{ hashFiles('package-lock.json') }}
+      - name: Install dependencies
+        if: steps.cache-dependencies.outputs.cache-hit != 'true'
+        run: npm install
+      - name: Run Linting
+        run: npm run lint

.gitignore

@@ -54,9 +54,6 @@ typings/
 # Yarn Integrity file
 .yarn-integrity
 
-# dotenv environment variables file
-.env
-
 # next.js build output
 .next
 

.travis.yml

@@ -1,5 +1,20 @@
 # Contributing
 
+## Local Development
+You can use the examples folder for local development.  To do so, run the following:
+```bash
+npm install
+npm link
+cd example
+npm install
+npm link redux-injectors
+rm -rf node_modules/react
+rm -rf node_modules/react-dom
+rm -rf node_modules/react-redux
+
+npm start
+```
+
 ## Pull requests
 
 Good pull requests - patches, improvements, new features - are a fantastic
@@ -26,11 +41,11 @@ included in the project:
 
     ```bash
     # Clone your fork of the repo into the current directory
-    git clone https://github.com/<your-username>/react-boilerplate.git
+    git clone https://github.com/<your-username>/redux-injectors.git
     # Navigate to the newly cloned directory
-    cd react-boilerplate
+    cd redux-injectors
     # Assign the original repo to a remote called "upstream"
-    git remote add upstream https://github.com/react-boilerplate/react-boilerplate.git
+    git remote add upstream https://github.com/react-boilerplate/redux-injectors.git
     ```
 
 2.  If you cloned a while ago, get the latest changes from upstream:

CONTRIBUTING.md

@@ -43,6 +43,33 @@ function createReducer(injectedReducers = {}) {
   const runSaga = sagaMiddleware.run;
 ```
 
+### Redux DevTools
+If you're using redux devtools, it's **important to set `shouldHotReload` to false**.  This is because otherwise, redux devtools will re-dispatch previous actions when reducers are injected, causing unexpected behavior.
+
+If using redux-toolkit:
+```js
+  const store = configureStore({
+    devTools: {
+      shouldHotReload: false
+    }
+  })
+```
+
+If not using redux-toolkit:
+```js
+import { composeWithDevTools } from 'redux-devtools-extension';
+
+const composeEnhancers = composeWithDevTools({
+  shouldHotReload: false
+});
+
+const store = createStore(reducer, composeEnhancers(
+  ...
+));
+```
+
+Unfortunately this causes a separate issue where the action history is cleared when a reducer is injected, **but it's still strongly recommended to set `shouldHotReload` to false**.  There's an [open issue in the redux-devtools repo about this](https://github.com/reduxjs/redux-devtools/issues/378).
+
 ### Injecting your first reducer and saga
 After setting up the store, you will be able to start injecting reducers and sagas.
 ```js
@@ -74,8 +101,31 @@ export default function BooksManager() {
 }
 ```
 
+**Note:** while the above usage should work in most cases, you might find your reducers/sagas aren't being injected in time to receive an action.  This can happen, for example, if you dispatch an action inside a `useLayoutEffect` instead of a `useEffect`.  In that case, `useInjectReducer` and `useInjectSaga` return boolean flags that are `true` once the reducers/sagas have finished injecting.  You can check these before rendering children that depend on these reducers/sagas being injected.
+
+```js
+import { useInjectReducer, useInjectSaga } from "redux-injectors";
+
+export default function BooksManager(props) {
+  const reducerInjected = useInjectReducer({ key: "books", reducer: booksReducer });
+  const sagaInjected = useInjectSaga({ key: "books", saga: booksSaga });
+
+  if (!reducerInjected || !sagaInjected) {
+    return null;
+  }
+
+  return (
+    <>
+      {props.children}
+    </>
+  );
+}
+```
+
+
 ## Documentation
-See the [**API reference**](docs/api.md)
+See the [**API reference**](docs/api.md)  
+Or the [**example**](example)
 
 ## Motivation
 There's a few reasons why you might not want to load all your reducers and sagas upfront: