feathersjs-ecosystem / feathers-redux

Integrate Feathers with your Redux store
MIT License
114 stars 23 forks source link

serviceName.on does not work #30

Open harrisrobin opened 7 years ago

harrisrobin commented 7 years ago

Steps to reproduce

(First please check that this issue is not already solved as described here)

The 'on' events don't seem to work using reduxified services.

Expected behavior

Tell us what should happen

When doing

const reduxServices = reduxifyServices(app, ["challenges"])

reduxServices.challenges.on("created", challenge => {
   console.log("created challenge", challenge) // nothing happens.
})

I am expecting the callback function to be triggered.

Actual behavior

However, nothing happens.

However, if I do However, if I do:

app.service("challenges").on("created", challenge => {
  console.log("created challenge", challenge) // this works
})

It works.

System configuration

Tell us about the applicable parts of your setup.

Module versions (especially the part that's not working): "feathers-client": "^2.3.0", "feathers-redux-immutable": "^0.1.0", "redux": "^3.7.2",

NodeJS version: v8.1.4

Operating System: Mac OS

Browser Version: Chrome 60.0.3112.101

@eddyystop any ideas to what I could be doing wrong? I did not see an example of this unfortunately so I expected it to work similarly to regular service calls.

eddyystop commented 7 years ago

feathersRedux.services[...].on() is not documented in the README. I don't remember why it was deprecated.

It does not use the same signature as app.service(...).on. Its documented in the source with

 * An action creator for listening on service events is returned as { on } and could be used like:
import feathersApp, { services } from './feathers';
feathersApp.service('messages').on('created', data => {
  store.dispatch(
    services.messages.on('created', data, (event, data, dispatch, getState) => {
      // handle data change
    })
  );
});

I'd appreciated knowing how you used it if you succeed.

bsubedi26 commented 7 years ago

Hey there, thanks for providing this module. It is definitely an awesome abstraction when using both feathers and redux together.

I also came across this issue when attempting to listen for real time service updates and updating the redux store accordingly. The way I was achieving this initially this was something similar to:

const messageService = feathers.service('message');
const { dispatch } = this.props;
messageService.on('created', (data) => {
      console.log('message::on::created ', data);
      dispatch(app.message.find());
})

The code above is essentially dispatching the find action for the respective service whenever the .on() event is executed. This was fine initially but when there is more data for the services then I believe it isn't efficient because you are only running the find() action to retrieve the newly updated data but you're retrieving ALL of the data along with the updated one.

Afterwards, I created a new action/reducer to update the service state accordingly. Something along the lines of this:

const messageService = feathers.service('message');
const { dispatch } = this.props;
messageService.on('created', (data) => {
      console.log('message::on::created ', data);
      dispatch(app.message.onCreated(data)); <<<=== new action
})

Action type:

  const ON_CREATED = `${SERVICE_NAME}ON_CREATED`;

Action creator:

    onCreated: createAction(ON_CREATED, (payload) => ({ data: payload })),

Reducer:

{ [ON_CREATED]: (state, action) => {
          const { data} = action.payload;
          return {
            ...state,
            [opts.queryResult]: Object.assign({}, state[opts.queryResult], {
              data: state[opts.queryResult].data.concat(data)
            }),
          };
        } },

The code seems to work fine although I have only tested/used it for a day. The components that are listening for the respective service state changes update accordingly when new data is added. If there is a better way to achieve this, please comment below.

eddyystop commented 7 years ago

Some of the still outstanding issues make it clear that many use cases are not best handled by the 3 stores (find, non-find, replication) within the feathers-redux store. I won't have time to take a deep dive into these issues before sometime Jan 2018.

In the meantime, perhaps you can consider making a PR to address what you pointed out above.

bsubedi26 commented 7 years ago

Sounds good. I will try to make the PR as soon as possible. I should get around to it within next couple days. Thanks @eddyystop.

bsubedi26 commented 7 years ago

@eddyystop, Created the PR here (https://github.com/feathers-plus/feathers-redux/pull/37). Please let me know if I am missing something.

bsubedi26 commented 7 years ago

@eddyystop, Any updates on this? I can add to the docs if this is merged also. Are there any issues?

eddyystop commented 7 years ago

Oops, sorry. I got lost doing the Buzzard common hooks docs. I'll check it out Sunday.

BTW, https://feathers-plus.github.io/v1/feathers-hooks-common/index.html

bsubedi26 commented 7 years ago

@eddyystop, The docs look awesome. Looks similar to VueJS docs. Keep up the great work.

eddyystop commented 7 years ago

I cloned from VueJS. :)

On Sun, Nov 19, 2017 at 9:58 PM, bsubedi26 notifications@github.com wrote:

@eddyystop https://github.com/eddyystop, The docs look awesome. Looks similar to VueJS docs. Keep up the great work.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/feathers-plus/feathers-redux/issues/30#issuecomment-345578784, or mute the thread https://github.com/notifications/unsubscribe-auth/ABezn4u7Yzh0ZUAei9XDATSEB79-0bnqks5s4OrcgaJpZM4PEFBH .

frinzekt commented 3 years ago

Whats the problem with this? this seems to be working well with #37 and #45

An example is written in the readme

Tomgorg commented 3 years ago

When I trying use

products.on('created', (data) => { dispatch(services.products.onCreated(data)); })

I getting error "TypeError: Cannot read property 'concat' of undefined"

in `260 | 261 | debug("redux:" + ON_CREATED, action); 262 | var updatedResult = Object.assign({}, state[opts.queryResult], {

263 | data: state[opts.queryResult].data.concat(action.payload.data), | ^ 264 | total: state[opts.queryResult].total + 1 265 | }); 266 | return (0, _extends11.default)({}, state, (_extends5 = {}, _extends5[opts.queryResult] = updatedResult, _extends5));`

Does this functionality work?

ppulwey commented 2 years ago

Hi everyone. We're currently figuring out feathers which seem to be a grate solution for node APIs and came across this repo. Now what we would expect is, that the store is updated with the received data (from create, find, delete...) automatically, even if socket connection is not used. This doesn't seem to be the case. Now the question is, is this intended only to work with realtime updates (socket.io)? Or are we missing an extra config option / function call?