Front end

• Tips to upgrade packages using yarn

yarn upgrade-interactive

• List out all versions of specific package

yarn info <package name> versions

• Constellation effect with particles.js

Merge new action into current action creators

• Add a new interface, let says

interface RefreshPageProps {
  refreshPage: (target: any) => void;
}

• Then define Props for the component

type BlogProps = BlogStore.BlogState &
  typeof BlogStore.actionCreators &
  RefreshPageProps &
  RouteComponentProps<{ page: number }>;

• Define mapDispatchToProps function as

function mapDispatchToProps(
  dispatch: Dispatch<any>
): typeof BlogStore.actionCreators & RefreshPageProps {
  return bindActionCreators(
    {
      ...BlogStore.actionCreators,
      refreshPage: (target: any) => {
        dispatch(target);
      }
    },
    dispatch
  );
}

• Finally, we add it into connect

export default connect(
  (state: ApplicationState) => state.blog,
  mapDispatchToProps
)(BlogManagement);

• Now we can use refreshPage function in the component

Redux-Observable dispath action in Epics

• Import import { push } from "react-router-redux"; on the top of duck-type file
• Then in any epic, we can do like

(action$: ActionsObservable<AddBlogAction>): Observable<Action> => {
    return action$
      .ofType("ADD_BLOG")
      .debounceTime(200)
      .switchMap(q => {
        return Observable.fromPromise(request.Blogs.createBlog(client, q.blog))
          .map(data => actionCreators.addBlogSuccessed(data))
          .catch(error => Observable.of(actionCreators.addBlogFailed(error)));
      })
      .delay(200)
      // .mapTo(commonActionCreators.redirectTo("/admin/blogs"));
      .mapTo(push("/admin/blogs"));
  }
`