question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Update reducer is not firing

See original GitHub issue

I’m trying to get an update reducer to fire upon a successful mutation. However the reducer does not appear to get triggered, even though the round trip to the server was successful.

This is how I configured the reducer:

const ReducerTestWithData = compose(
  graphql(UpdateValueMutation, {
    props: ({ mutate }) => ({
      updateValue: (id, value) => mutate({ variables: {id, value} })
    }),
    options: (ownProps) => ({
      reducer: (prev, action) => {
        console.log("Reducer fired");
        return prev;
      }
    }),
  }),
  connect(
    (state, ownProps) => ({}),
    (dispatch, ownProps) => ({
      dispatch,
    }),
  ),
)(ReducerTest);

I’m wondering if there’s any extra configuration (for example when setting up the store) that I’ve missed, or is maybe the options stanza wrong?

I’ve stripped the example down to a bare bones runnable example (see below). In this example, the update is successful, but the reducer does not fire:

import React, { Component, PropTypes } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';

import { createStore, combineReducers, applyMiddleware} from 'redux';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider, graphql, compose } from 'react-apollo';
import { connect } from 'react-redux';
import gql from 'graphql-tag';

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

class ReducerTest extends Component {

  constructor(props) {
    super(props);
    this.updateValue = this.updateValue.bind(this);
  }

  updateValue() {
    this.props.updateValue(
      "101",
      "some_value"
    ).then(({ data }) => {
      if (!data.errors) {

        let { id, value } = data.updateValue;
        console.log("Successfully updated value (" + value + ") for id (" + id +")");

      } else {
        console.log("Application error: " + error);
      }
    }).catch((error) => {
      console.log("Server error: " + error);
    });
  }

  render() {
    return (
      <View style={{alignItems: 'center', justifyContent: 'center', flex: 1}}>
        <TouchableOpacity onPress={this.updateValue}>
          <Text>UPDATE VALUE</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

ReducerTest.propTypes = {
  updateValue: PropTypes.func.isRequired,
};

const UpdateValueMutation = gql`
  mutation updateValue($id: String!, $value: String!) {
    updateValue(id: $id, value: $value) {
      id
      value
    }
  }
`;

const ReducerTestWithData = compose(
  graphql(UpdateValueMutation, {
    props: ({ mutate }) => ({
      updateValue: (id, value) => mutate({ variables: {id, value} })
    }),
    options: (ownProps) => ({
      reducer: (prev, action) => {
        console.log("Reducer fired");
        return prev;
      }
    }),
  }),
  connect(
    (state, ownProps) => ({}),
    (dispatch, ownProps) => ({
      dispatch,
    }),
  ),
)(ReducerTest);

class ReducerTestContainer extends Component {

  constructor(props) {
    super(props);
    const networkInterface = createNetworkInterface({ uri: 'http://localhost:4000/api' });

    this.client = new ApolloClient({
      networkInterface,
      dataIdFromObject: (result) => {
        if (result.id && result.__typename) {
          return result.__typename + result.id;
        }
        return null;
      },
    });

    this.store = createStore(
      combineReducers({
        apollo: this.client.reducer(),
      }),
      compose(
        applyMiddleware(this.client.middleware()),
      )
    );
  }

  render() {
    return (
      <ApolloProvider store={this.store} client={this.client}>
        <ReducerTestWithData/>
      </ApolloProvider>
    );
  }
}

AppRegistry.registerComponent('reducer_test', () => ReducerTestContainer);

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:18 (3 by maintainers)

github_iconTop GitHub Comments

1reaction
helfercommented, Dec 23, 2016

@0x6e6562 For updating just a specific node (and not inserting to or removing from a list) I would recommend dataIdFromObject (I’d recommend using that instead of updateQueries or reducer whenever you can). If the updated node has the same global id, then Apollo Client will update that node in the cache, and all queries involving that node will be updated.

Since the original question has been solved, I’ll close this issue. If there’s an actual issue, feel free to open a new thread.

Read more comments on GitHub >

github_iconTop Results From Across the Web

reactjs - Redux - reducer not getting called - Stack Overflow
I think your action hasn't been dispatched. In your input.js On button tag, change onClick={() => addName(document.
Read more >
Troubleshooting | Redux
Redux assumes that you never mutate the objects it gives to you in the reducer. Every single time, you must return the new...
Read more >
Actions and reducers: updating state - Human Redux
Actions and reducers: updating state. I glossed over how state changes occur in the previous chapter. Let's look a bit deeper.
Read more >
Why isn't my React component updating (using Redux)?
Your useSelector is subscribing to the value in the store, but its value is not updated at all. Never mutate the state in...
Read more >
ngRx/Store and 5 silly mistakes - ITNEXT
In this article, I will tell you how to avoid simple pitfalls while working with ngRx to improve your family-work balance:-) If you...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found