[feature-req] Actions on mount parameter about react-redux

[gaearon]

@prepare(props => action) where action may be async action?

[gaearon]

I'm not sure you'd really need boundActions there. If you give it an action creator, the HOC can take care of dispatching itself.

[dzannotti]

Uhm.... I think you need bound actions there because you might want to call multiple (async or not) actions. example

(props, boundActions) => { 
  boundActions.getUserProfile(props.userId);
  boundActions.resetFormX()
}

How can the HoC do this with unbound actions?
I'm not 100% sure if this would add confusion/fuel bad practices among newcomers, but i think that most people would have to use lifecycle events to achieve this, so why not facilitate it into the connector itself, other flux framework offer routeActions (which are pretty much this) and it's a common enough topic of questioning on slack

[dzannotti]

This also could possibly facilitate the promise collection needed for server side initial rendering

[gaearon]

I'd like to see this as a separate package in userland first. When its API is nailed, we can consider including it.

[volkanunsal]

@dzannotti Is it possible to call an action from within another action right now? If it were possible, this might be better done from an action.

This also reminds me of Cerebral's signals, which stack up actions.

[gaearon]

Yes, you can do this with redux-thunk or similar middleware.

// assuming redux-thunk
function prepareComponent(props) {
  return function (dispatch) {
    dispatch(getUserProfile(props.userId));
    dispatch(resetFormX());
  }
}

@prepare(prepareComponent) 
...

The only problem is we want to only do this when specific prop changes.

[dzannotti]

Interesting, I didn't think about that, recalling it on props change should be trivial, knowing if it's needed or not might not be

[gaearon]

That's why I'm not sure there's a general nice solution here. Different projects may solve this differently.

[gaearon]

Interesting pattern: passing custom function instead of action creator as second parameter:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { fetchUser, fetchRepos } from '../actions';
import User from '../components/User';

class UserPage extends Component {
  componentWillMount() {
    this.props.fetchData(this.props.userLogin);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.userLogin !== this.props.userLogin) {
      this.props.fetchData(nextProps.userLogin);
    }
  }

  render() {
    const { user } = this.props;
    if (!user) {
      return <h1>Loading...</h1>;
    }

    return (
      <div>
        <User {...user} />
      </div>
    );
  }
}

UserPage.propTypes = {
  user: PropTypes.object,
  userLogin: PropTypes.string.isRequired,
  fetchData: PropTypes.func.isRequired
};

function mapStateToProps(state) {
  return {
    users: state.database.users
  };
}

function mergeProps(stateProps, dispatchProps, ownProps) {
  const { users } = stateProps;
  const { userLogin } = ownProps.params;

  return Object.assign({}, dispatchProps, {
    user: users[userLogin],
    userLogin
  });
}

function fetchData(userLogin) {
  return dispatch => Promise.all([
    dispatch(fetchUser(userLogin)),
    dispatch(fetchRepos(userLogin))
  ]);
}

export default connect(
  mapStateToProps,
  { fetchData },
  mergeProps
)(UserPage);

[dzannotti]

That's pretty much the pattern i was looking for, but i need bind action + fetchData

[gaearon]

Why do you need it to be bound there?

function fetchData(userLogin) {
  return dispatch => {
    return Promise.all([
      dispatch(fetchUser(userLogin)),
      dispatch(fetchRepos(userLogin))
    ]).then(() => dispatch(resetForm());
  };
}

[dzannotti]

Oh no, i don't, i just need boundActions to be passed down to the component, that's all

[dzannotti]

Yeah re-reading the pattern is slightly off from what i normally use/need.

connect((state) => mereStateToProps, actionCreators, (props, dispatch) => {
// execute this on mount/props change
dispatch(fetchData());
})(MyComponent);

this would allow MyComponent to remain pure while still having route based actions

[malte-wessel]

Take a look at this (decorator) function. https://github.com/broucz/threads-redux/blob/master/client/decorators/onUpdate.js

The callback is only invoked if certain parameters change.

[gaearon]

While I'm happy to see this in userland, I don't think it belongs in react-redux.

[gaearon]

Here's another example of such HOC from redux-react-router-async-example:

import React, { PropTypes } from 'react'
import shallowEqual from 'react-redux/lib/utils/shallowEqual'

function mapParams (paramKeys, params) {
  return paramKeys.reduce((acc, key) => {
    return Object.assign({}, acc, { [key]: params[key] })
  }, {})
}

export default function fetchOnUpdate (paramKeys, fn) {

  return DecoratedComponent =>
  class FetchOnUpdateDecorator extends React.Component {

    static propTypes = {
      actions: PropTypes.object
    }

    componentWillMount () {
      fn(mapParams(paramKeys, this.props.params), this.props.actions)
    }

    componentDidUpdate (prevProps) {
      const params = mapParams(paramKeys, this.props.params)
      const prevParams = mapParams(paramKeys, prevProps.params)

      if (!shallowEqual(params, prevParams))
        fn(params, this.props.actions)
    }

    render () {
      return (
        <DecoratedComponent {...this.props} />
      )
    }
  }
}

Usage example:

@fetchOnUpdate([ 'username', 'repo' ], (params, actions) => {
  const { username, repo } = params
  actions.fetchRepo({ username, repo })
  actions.fetchRepoStargazers({ username, repo })
})
export default class Repo extends React.Component {
  ...
}