React - Can you update an Unstated container state from an external function?

Question

In the example from the Unstated library they update state within a container by interacting with a jsx button that is subscribed to the container.

import React from 'react';
import { render } from 'react-dom';
import { Provider, Subscribe, Container } from 'unstated';

type CounterState = {
  count: number
};

class CounterContainer extends Container<CounterState> {
  state = {
    count: 0
  };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
}

function Counter() {
  return (
    <Subscribe to={[CounterContainer]}>
      {counter => (
        <div>
          <button onClick={() => counter.decrement()}>-</button>
          <span>{counter.state.count}</span>
          <button onClick={() => counter.increment()}>+</button>
        </div>
      )}
    </Subscribe>
  );
}

render(
  <Provider>
    <Counter />
  </Provider>,
  document.getElementById('root')
);

Is there a way to update the state within the container from a function in a component outside of the Container? So for instance if I want up to update state during the return of a promise how would I go about doing so. Pseudo code

login = () => {
    let url = baseURL + '/user/login?_format=json';  

    let data = {
      "name": this.state.email,  
      "pass": this.state.password
    };



        axios({
          url,
          method: "POST",
          headers: {
            'Accept':  'application/json',
            'Content-Type': 'application/json',
          },
          withCredentials: true,
          credentials: 'same-origin', 
          data,
          })
          .then(function(result) {
            console.log('result:', result);
                SET STATE HERE!!!!!!!
counter.increment()

              })
          .catch(error => console.log('error:', error));
      };

score 3 · Accepted Answer · answered Sep 11 '18 at 22:58

The problem isn't specific to Unstated, this would apply to React context API that uses render prop pattern, too.

The problem with login is that its control flow is flawed. It isn't be able to efficiently catch errors because it suppresses them. And it encapsulates the promise inside, which is a mistake that prevents it from being properly tested, for starters

It can expose a promise, or accept a callback, or both:

login = async (cb) => {
  ...    
  return axios(...)
  .then(function(result) {
    if (cb)
      cb(result);

    return result;
  })
  .catch(error => console.log('error:', error));
}

Can be used as:

<button onClick={() => login(() => counter.decrement())}>-</button>

Or:

<button onClick={async () => { await login(); counter.decrement(); }}>-</button>

It's also possible to make login accept counter as an argument but this would couple it to implementation which is unnecessary.

Thank you @estus I ended up going with the inline async/await, and it worked perfectly. — Shawn Matthews, Sep 12 '18 at 03:26
I see that you are including cb in here which I'm assuming is to represent callback. What would be the use case for a callback vs just returning the promise? — Shawn Matthews, Sep 12 '18 at 03:27

score 1 · Answer 2 · edited Sep 12 '18 at 00:18

1

This is a common question, with many solutions to your problem. You need to pass the function to a child, that then updates the parent. I will link to a previous answer that I posted. In your case, where you render

<Login upParentCounter={this.increment}/>

And inside the login component

this.props.upParentCounter()

Dealing with Nested React Components' State Changes

edited Sep 12 '18 at 00:18

Sushanth --

55,259
9
66
105

answered Sep 11 '18 at 22:33

Gavin Thomas

1,827
2
11
17

React - Can you update an Unstated container state from an external function?

2 Answers2

Linked