docs: update examples to include api actions and simple "get" selector

Author: Temzasse

example/src/components/order/index.js

@@ -9,17 +9,20 @@ import settingsDuck from '../settings/settings.duck';
 class Order extends Component {
   static propTypes = {
     orders: PropTypes.array.isRequired,
+    isLoading: PropTypes.bool.isRequired,
     fetchOrders: PropTypes.func.isRequired,
   };
 
   render() {
-    const { orders, fetchOrders } = this.props;
+    const { orders, fetchOrders, isLoading } = this.props;
 
     return (
       <Container>
         <h1>Order example</h1>
         <button onClick={fetchOrders}>Fetch orders</button>
 
+        {isLoading && <Loading>Loading orders..</Loading>}
+
         {orders.length > 0 && (
           <Orders>
             {orders.map(order => (
@@ -36,6 +39,10 @@ const Container = styled.div`
   flex: 1;
 `;
 
+const Loading = styled.div`
+  margin-top: 16px;
+`;
+
 const Orders = styled.ul`
   list-style: none;
   margin-top: 16px;
@@ -45,6 +52,7 @@ export default connect(
   state => ({
     // orders: orderDucks.selectors.getOrders(state),
     orders: orderDucks.selectors.get('orders', state),
+    isLoading: orderDucks.selectors.getIsLoading(state),
   }),
   {
     testThunk: settingsDuck.actions.testThunk,

example/src/components/order/order.duck.js

@@ -1,27 +1,28 @@
 import { takeEvery, put } from 'redux-saga/effects';
-import { createDuck } from 'reducktion'; // eslint-disable-line
+import { createDuck, createApiAction } from 'reducktion'; // eslint-disable-line
 import { sleep } from '../../helpers';
 
 const duck = createDuck({
   name: 'order',
   inject: ['user'],
   state: {
     orders: [],
-    isLoading: false,
+    packages: [],
+    error: undefined,
     hasError: false,
+    isLoading: false,
   },
   actions: () => ({
-    fetchOrders: state => ({ ...state, isLoading: true }),
-    failFetchOrders: state => ({
-      ...state,
-      isLoading: false,
-      hasError: true,
-    }),
-    receiveOrders: (state, action) => ({
-      ...state,
-      isLoading: false,
-      hasError: false,
-      orders: action.payload,
+    // Simple way to create API related action
+    fetchOrders: createApiAction('orders'),
+    // Provide custom success reducer handler
+    fetchPackages: createApiAction({
+      success: (state, action) => ({
+        ...state,
+        packages: action.payload,
+        hasError: null,
+        isLoading: false,
+      }),
     }),
   }),
   reactions: ({ deps }) => ({
@@ -39,27 +40,21 @@ const duck = createDuck({
 
 // Saga handlers
 function* fetchOrdersSaga() {
-  // Fake API call delay
-  yield sleep(400);
-  yield put(
-    duck.actions.receiveOrders([
-      { id: 1, name: 'Mock order 1' },
-      { id: 2, name: 'Mock order 2' },
-      { id: 3, name: 'Mock order 3' },
-      { id: 4, name: 'Mock order 4' },
-    ])
-  );
-
-  /* Or use manually defined actions that does the same thing as `receiveOrders`
-  yield put(
-    duck.actions.setOrders([
-      { id: 1, name: 'Mock order 1' },
-      { id: 2, name: 'Mock order 2' },
-      { id: 3, name: 'Mock order 3' },
-      { id: 4, name: 'Mock order 4' },
-    ])
-  );
-  */
+  try {
+    // Fake API call delay
+    yield sleep(400);
+    // this.props.fetchOrders()
+    yield put(
+      duck.actions.fetchOrders.success([
+        { id: 1, name: 'Mock order 1' },
+        { id: 2, name: 'Mock order 2' },
+        { id: 3, name: 'Mock order 3' },
+        { id: 4, name: 'Mock order 4' },
+      ])
+    );
+  } catch (error) {
+    yield put(duck.actions.fetchOrders.fail());
+  }
 }
 
 export default duck;

example/src/components/settings/index.js

@@ -14,6 +14,7 @@ class Settings extends Component {
     toggleNotifications: PropTypes.func.isRequired,
     toggleGps: PropTypes.func.isRequired,
     toggleDarkMode: PropTypes.func.isRequired,
+    testThunk: PropTypes.func.isRequired,
   };
 
   render() {
@@ -24,11 +25,15 @@ class Settings extends Component {
       toggleNotifications,
       toggleGps,
       toggleDarkMode,
+      testThunk,
     } = this.props;
 
     return (
       <Container>
         <h1>Settings example</h1>
+
+        <Button onClick={testThunk}>Test Thunk</Button>
+
         <Options>
           <Label>
             Dark mode on
@@ -86,6 +91,16 @@ const Checkbox = styled.input.attrs({ type: 'checkbox' })`
   margin-left: 16px;
 `;
 
+const Button = styled.button`
+  padding: 8px 12px;
+  border: none;
+  background-color: slategray;
+  color: #fff;
+  border-radius: 4px;
+  width: 200px;
+  margin-bottom: 32px;
+`;
+
 export default connect(
   state => ({
     gpsEnabled: settingsDuck.selectors.getGpsEnabled(state),
@@ -97,5 +112,6 @@ export default connect(
     toggleNotifications: settingsDuck.actions.toggleNotifications,
     toggleGps: settingsDuck.actions.toggleGps,
     toggleDarkMode: settingsDuck.actions.toggleDarkMode,
+    testThunk: settingsDuck.actions.testThunk,
   }
 )(Settings);

example/src/components/settings/settings.duck.js

@@ -25,16 +25,22 @@ const duck = createDuck({
       ...state,
       darkModeEnabled: !state.darkModeEnabled,
     }),
-    testThunk,
   }),
+  thunks: { testThunk },
 });
 
 // Thunks
-function testThunk(arg, { user, order }) {
+function testThunk(arg, { user }) {
   return async dispatch => {
-    dispatch(duck.actions.updateTheme('dark'));
-    dispatch(order.actions.setOrders());
-    dispatch(user.actions.setProfile());
+    dispatch(duck.actions.toggleGps());
+    dispatch(duck.actions.toggleDarkMode());
+    dispatch(
+      user.actions.setProfile({
+        name: 'New Profile',
+        avatarUrl: 'https://source.unsplash.com/random/200x200',
+        githubUrl: 'https://github.com/Temzasse',
+      })
+    );
   };
 }
 

example/src/components/user/index.js

@@ -67,15 +67,19 @@ const LogoutButton = styled.button`
   width: 120px;
 `;
 
+// You can also destruct `selectors` and `actions` for brewity
+const { selectors, actions } = userDuck;
+
 export default connect(
   state => ({
-    isAuthenticated: userDuck.selectors.getIsAuthenticated(state),
-    profile: userDuck.selectors.getProfile(state),
-    loading: userDuck.selectors.getLoading(state),
-    error: userDuck.selectors.getError(state),
+    isAuthenticated: selectors.getIsAuthenticated(state),
+    // profile: selectors.getProfile(state),
+    profile: selectors.get('profile', state),
+    loading: selectors.getLoading(state),
+    error: selectors.getError(state),
   }),
   {
-    login: userDuck.actions.login,
-    logout: userDuck.actions.logout,
+    login: actions.login,
+    logout: actions.logout,
   }
 )(User);

example/src/components/user/user.duck.js

@@ -22,6 +22,7 @@ const duck = createDuck({
       loading: false,
       error: false,
     }),
+    setProfile: (state, action) => ({ ...state, profile: action.payload }),
   }),
   selectors: ({ name }) => ({
     getProfile: state => state[name].profile, // Custom selector just for fun