Callback with Redux-thunk

Question

I’d like to know how to get a call back from dispath something like this, this with React:

this.props.store.dispatch(dados, result => {
   console.log(result);
});

On this line above the console.log never comes in!

index js.: (relevant parts)

const reducers = combineReducers({ pacientes, profissional, procedimento });
const store = createStore(reducers, applyMiddleware(thunkMiddleware));

injectTapEventPlugin();

ReactDOM.render(
  (
    <MuiThemeProvider theme={theme}>
      <Provider store={store}>
..

action:

export function insertPaciente(paciente, pessoa) {
    return (dispatch) => {
        Axios.callApi('POST', '/pacientes/' + JSON.stringify(paciente) + '/pessoa/' + JSON.stringify(pessoa), {}, pacienteUpdate => {
            dispatch(actionCreator.insertPaciente(pacienteUpdate.id, pacienteUpdate));
            return pacienteUpdate;
        })
    };
}

View, where the method triggering the action: (relevant parts)

pessoa['datacadastro'] = new Date();
            pessoa['idempresa'] = empresa.getEmpresa();
            paciente['datacadastro'] = new Date();

//Abaixo aqui gostaria de alterar isto ter um callback
this.props.insertPaciente(paciente, pessoa);



const mapStateToProps = state => {
    return { pacientes: state.pacientes }
}

const mapDispatchToProps = dispatch => {
    return {
        insertPaciente: (paciente, pessoa) => {
            dispatch(PacienteAction.insertPaciente(paciente, pessoa));
        },

        updatePaciente: (paciente, pessoa) => {
            dispatch(PacienteAction.updatePaciente(paciente, pessoa));
        },
    }
}

PacienteCadastro.propTypes = {
    classes: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
};

const PacientesContainer = connect(mapStateToProps, mapDispatchToProps)(PacienteCadastro);
export default withStyles(styles)(PacientesContainer);

I created the actions, reducers, to store using the Redux-thunk, finally everything as the costumes, but I can not get the return of this. In the backend Everything ok, returns the perfect object, but do not know how to get the result otherwise, for lack of knowledge even in Redux. In case I am making a registration screen, and when clicking on the RECORD button it executes the action, who effectuates the Dispatch, like I said it’s okay so far, but I don’t know how to get the result of this!

Answer 1

Very simple friend, what you need to do is return one promise after all executions of your flow.

First, in your action, after the request and the call from dispatch, create a promise. Example:

export function insertPaciente(paciente, pessoa) {
  return(dispatch) => {
    return new Promise(function(resolve, reject)){ // criando a promise
      Axios.callApi('POST', '/pacientes/' + JSON.stringify(paciente) + '/pessoa/' + JSON.stringify(pessoa), {}, pacienteUpdate => {
        dispatch(actionCreator.insertPaciente(pacienteUpdate.id, pacienteUpdate));
        resolve(pacienteUpdate); // chamando o resolve pra ser executado e passando o paciente update
      })
    }
  };
}

After that is just you return this promise in his mapDispatchToProps. Thus:

const mapDispatchToProps = dispatch => {
  return {
    insertPaciente: (paciente, pessoa) => {
      return dispatch(PacienteAction.insertPaciente(paciente, pessoa)); // retornando a promise
    }
  }
}

Now ready, you can create a function callback which will be executed after the request is made and after you have given a dispatch.

this.props.insertPaciente(paciente, pessoa)
    .then(response => {
      // Aqui vai a sua função callback, que seria aquele resolve() do seu Action.
    });

I hope I’ve helped, good studies.