Callback with Redux-thunk

Question

Callback with Redux-thunk

Navigation

#1 by (1 votes)

0

I would like to know how I would do to have a return on dispath call something like this, with React:

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

In this line above console.log never enter!

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 that triggers 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 actions , reducers , the store using redux-thunk, the return of this. In the backend everything ok, returns the perfect object, but I do not know how to get the result otherwise, for lack of knowledge even in redux. In case I am doing a registration screen, and when I click the RECORD button it executes the action , which effects the dispatch , as said everything is ok until then, but I do not know how to get the result of this!

node.js react redux

asked by anonymous 10.09.2018 / 20:02

1 answer

consider all fields when grouping in mongodb When adding user, always gives ERROR but ends up adding

score 1 · Accepted Answer

Very simple friend, what you need to do is return a promise after all the runs of your stream.

First, in your action, after the request and the dispatch call, 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
      })
    }
  };
}

Then you only have to return this promise on your mapDispatchToProps . This way:

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

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

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

I hope to have helped, good studies.