How to use the react-redux/lib/utils/wrapActionCreators function in react-redux

To help you get started, we’ve selected a few react-redux examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github bsideup / rx-connect / examples / blog / src / view / UserView.jsx View on Github external
import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { rxConnect } from "rx-connect";
import { Link } from "react-router";

import { hashCode, toHex } from "../utils";

import { fetchUser } from "../actions/users";
import { fetchPosts } from "../actions/posts";

@connect(undefined, wrapActionCreators({ fetchUser, fetchPosts }))
@rxConnect(props$ => {
    const userId$ = props$.pluck("params", "userId").distinctUntilChanged();

    return userId$.withLatestFrom(props$)
        .switchMap(([userId, { fetchUser, fetchPosts }]) => {
            const user$ = fetchUser(userId)
                .catch(Rx.Observable.of(null));

            const postsByUser$ = fetchPosts({ userId })
                .pluck("data")
                .catch(Rx.Observable.of(null));

            // combineLatest to wait until both user and posts arrived to avoid flickering
            return Rx.Observable
                .combineLatest(user$, postsByUser$)
                .startWith([])
github bsideup / rx-connect / examples / blog / src / view / PostView / index.jsx View on Github external
import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { Link } from "react-router";
import { rxConnect } from "rx-connect";

import { hashCode, toHex, capitalize } from "../../utils";

import { fetchPost, fetchComments } from "../../actions/posts";
import { fetchUser } from "../../actions/users";

import Comments from "./Comments";

@connect(undefined, wrapActionCreators({ fetchComments, fetchPost, fetchUser }))
@rxConnect(props$ => {
    const postId$ = props$.pluck("params", "postId").distinctUntilChanged();

    return postId$.withLatestFrom(props$).switchMap(([ postId, { fetchComments, fetchPost, fetchUser }]) => {
        const post$ = fetchPost(postId)
            .switchMap(post =>
                fetchUser(post.userId)
                    .map(user => ({ ...post, user }))
            )
            .catch(Rx.Observable.of(null));

        const comments$ = fetchComments(postId)
            .catch(Rx.Observable.of(null));

        // Fetch comments together with post's data to avoid flickering
        return Rx.Observable
github bsideup / rx-connect / examples / blog / src / view / LoginView.jsx View on Github external
import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { rxConnect, ofActions } from "rx-connect";
import { push } from "react-router-redux";

import { login } from "../actions/auth";

@connect(null, wrapActionCreators({ login, push }))
@rxConnect(props$ => {
    const actions = {
        login$: new Rx.Subject()
    };

    return Rx.Observable.merge(
        Rx.Observable::ofActions(actions),

        actions.login$
            .withLatestFrom(props$)
            .switchMap(([[ email, password ], { login, push }]) =>
                login(email, password)
                    .mapTo(undefined) // No error in case of success
                    .do(() => push("/")) // TODO use side-effect library
                    .catch(error => Rx.Observable.of(error))
                    .map(error => ({ loading: false, error }))
github bsideup / rx-connect / examples / blog / src / view / MainView.jsx View on Github external
import React from "react";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { Link } from "react-router";

import Time from "./Time";

import { logout } from "../actions/auth";

@connect(
    ({ user }) => ({ user }),
    wrapActionCreators({ logout })
)
export default class MainView extends React.PureComponent {

    render() {
        const { user, children } = this.props;

        const { logout } = this.props;

        return (
            <div>
                <div>
                    <div>
                        <div>
                            <img src="//placehold.it/60/00B5AD">&nbsp; RxConnect blog example
                        </div>
                        Home</div></div></div>
github bsideup / rx-connect / examples / blog / src / view / PostsView.jsx View on Github external
import React from "react";
import Rx from "rxjs";
import { connect } from "react-redux";
import wrapActionCreators from "react-redux/lib/utils/wrapActionCreators";
import { rxConnect } from "rx-connect";
import { Link } from "react-router";

import { keyBy } from "../utils";

import { fetchPosts } from "../actions/posts";
import { fetchUsers } from "../actions/users";

import Post from "./Post";

@connect(undefined, wrapActionCreators({ fetchPosts, fetchUsers }))
@rxConnect(props$ => {
    const page$ = props$.pluck("location", "query", "page").map(page => page ? Number(page) : 1).distinctUntilChanged().publishReplay().refCount();

    const posts$ = page$.withLatestFrom(props$)
        .switchMap(([page, { fetchPosts }]) =>
            fetchPosts({ page: page - 1 })
                .startWith(undefined)
        );

    const users$ = props$
        .pluck("fetchUsers")
        .distinctUntilChanged()
        .switchMap(fetchUsers => fetchUsers())
        .map(users => users::keyBy("id"));

    return Rx.Observable.merge(