GA-MO/react-redux-parcel

SPA Template

Installation

$ npm install

Start dev server

$ npm run dev

Build for production

$ npm run build

Testing

$ npm run test
$ npm run test:watch

Redux with React-modux

Use React module with react-modux

Mockup JSON

Create .json files in folder /JSONMockup for mockup data from api response

/JSONMockup
|-- posts.json
|-- news.json

Setup Fetch API

Handle service error

Handle is service error /src/api/createFetcher/isServiceError.js

Create error format

Create error message format at /src/api/createFetcher/createErrorMessage.js

Create fetcher

You can use axios options see

Create Fetch function /src/api/fetchers.js

import createFetcher from './createFetcher';

const fetchPostList = () =>
  createFetcher({
    useMock: true,
    jsonMock: 'posts.json', // from /JSONMockup
    delay: 0,
    method: 'get',
    url: 'https://jsonplaceholder.typicode.com/posts'
  });

Utilities

connectRedux

Auto bindActionCreators and actions will be added in props props.actions

import { connectRedux } from '../utils';

const mapState = state => {};
const actions = {};

export default connectRedux(mapState, actions)(Component);

createActionWithFetching

Use with Redux action to fetching data without handle try/catch

You can custom UI for loading, success and catch error in /src/utils/createActionWithFetching.js

import { createActionWithFetching } from '../utils';
import { fetchPostList } from '../api/fetchers';

const getPostList = () => {
  const callAction = async dispatch => {
    const params = {};
    const { data } = await fetchPostList(params);

    // dispatch data
  };

  return createActionWithFetching({
    loadingMessage: 'Fetching data..',
    successMessage: 'Success',
    callAction
  });
};

export { getPostList };

history

You can use any history navigate to change the current location see

import { history } from '../utils';
history.push('/login');

Hooks for React component

useStateLoading

import { useStateLoading } from '../hooks';

const Component = props => {
  const { postLoading, fetchWithLoading } = useStateLoading({
    stateNames: ['postLoading', 'other']
  });

  useEffect(() => {
    fetchWithLoading({
      name: 'postLoading',
      fetcher: () => props.dispatch(getPostList())
    });
  }, []);

  return <Fragment>{postLoading ? <div>{'Loading post ui'}</div> : 'Posts'}</Fragment>;
};