RR with Redux about react-refetch HOT 9 CLOSED

Was also looking for a solution to this, and ended up writing my own (of course :-P), might be interesting for others ending up here, at least for inspiration:

https://github.com/tomat/react-reflorp

Basically I really like the way Refetch does things, but I still wanted less boilerplate, and to keep things in the Redux store. Ended up with something of an ORM, where it keeps track of which component needs which entity with which id, and stores them separately in Redux, but still allowing use of regular Redux and Refetch within the same decorators. Not in any way production ready, though :-)

Feel free to open an issue over there if you have a question...

from react-refetch.

I think it should just work, unless Refetch and Redux connect imports clash. I imagine passing your component to one connect and pipe it to the next one and you should have all required props available.

I'll keep an eye on this discussion though.

from react-refetch.

You probably also want to make sure that the props actually changed or at least that the PS changed from pending to fulfilled; otherwise, you'll end up calling the action multiple times.

Without thinking about it too much, this pattern feels a bit too imperative to me. If this really is a pattern that people would like to use, I'd like to see something more declarative and/or reactive. Furthermore, I'd really like to see use cases/stories so we are designing this to solve real world problems instead of starting with the technology.

Thanks for kicking off this discussion.

from react-refetch.

@ryanbrainard connecting both RR and Redux to the same component doesn't worked well on my tests. Handling updates inside componentWillReceiveProps was a mess.

I propose a different approach:

connect((props, state, dispatch) => ({
  projectsFetch: '/api/projects.json',
  someStateFromRedux: state.someStateFromRedux,
  onSomething: () => dispatch(someReduxAction())
}))(Projects)

Maybe you can enable mapping state and dispatch as additional properties. As store will be available through this.context maybe you can check for it and enable state/dispatch mapping if it's available.

from react-refetch.

+1

from react-refetch.

As I can't make RR work with Redux for now I've created a side project based on RR ideas for cases that you really need Redux.

Here is a sample usage: https://github.com/hnordt/reax/blob/f148edeb1fa870c12f0b7a26c603101fa4990cb2/src/projects/containers/Projects.js

Repo: https://github.com/hnordt/reax-api

While it's already working and I'm using in production, it doesn't cover all RR features (I don't even know if it will, as it's not the point).

The cool part is that it's already very flexible (if you really need Redux).

You just need to dispatch a callAPI action, the first param is id, then id will be available to be read from state.api.<id>. For example:

// data will contain endpoint data in case of both success or failure
// isLoading will be set to true if request is not complete
// error will be set to true in case of failure
const mapStateToProps = state => {
  const {
    data: projects, // just renaming data to projects because it'll be passed to a component
    isLoading = true, // isLoading will default to true
    error
  } = state.api.projects || {}; // state.api.projects will be undefined before the request, so we need a empty object for destructing
  return {
    projects,
    isLoading,
    error
  };
};

const mapDispatchToProps = dispatch => ({
  // callAPI(id, method, url, params, dispatchRequest = true)
  // if you change dispatchRequest to false, isLoading won`t be changed
  loadProjects: () => dispatch(callAPI('projects', 'GET', '/api/projects'))
});

from react-refetch.

+1

from react-refetch.

@hnordt where did your project go!? I need it :)

Take a look at https://github.com/facebook/flux/blob/master/examples/flux-chat/js/actions/ChatServerActionCreators.js and https://facebook.github.io/flux/docs/chat.html

You can workaround by dispatching an action UPDATE_ALL to put the RR .value into the redux store

Also http://redux.js.org/docs/advanced/ExampleRedditAPI.html presents a solution. No need of react-refetch then, if you need your data in the store.

from react-refetch.

Closing this out as it seems like the discussion has died off, but feel free to re-open if needed.

from react-refetch.