Data is not passing from action to reducer, on using react-redux - reactjs

Question

I am calling API in action and have to pass those action to reducer. But data from action is not passing to the reducer. I am not using combined-reducer either.
src/index.js is
import React from 'react';
import ReactDOM from 'react-dom';
import PrescriptionIndex from './components/prescriptionIndex.jsx';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducer from './reducer';
const store = createStore(reducer);
ReactDOM.render(
<Provider store={store}>
<PrescriptionIndex />
</Provider>, document.getElementById("root")
)
This is my component PrescriptionIndex.jsx
import React, { Component } from 'react';
import { index_prescription } from '../action/index.js';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
class PrescriptionIndex extends Component {
constructor(props){
super(props);
this.state={
prescription: null
}
}
action_call(){
index_prescription();
}
render(){
this.state.prescription === null ? this.action_call() : null
return(
<div>
PrescriptionIndex
</div>
)
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({index_prescription}, dispatch)
}
function mapStateToProps( state ){
return {
profiles: state
}
}
export default connect(mapStateToProps, mapDispatchToProps)(PrescriptionIndex);
I am calling index function as index_prescription(); in action_call().
And my action is
import {ADD_PRESCRIPTION} from '../constant.js';
import axios from 'axios';
import dispatch from 'axios';
export const index_prescription = () => {
const base_url= "http://localhost:3000/api/v1/";
const fetch_url = `${base_url}/prescriptions`;
axios.get(fetch_url)
.then(response => {
dispatch({type: ADD_PRESCRIPTION, details: response.data})
})
}
Reducer is
import {ADD_PRESCRIPTION} from '../constant.js';
const profiles = (state=[], action) => {
let profiles = null;
switch(action.type){
case ADD_PRESCRIPTION:
profiles = [...state, action.details]
return profiles;
default:
return state;
}
}
export default profiles;
constant.js is
export const ADD_PRESCRIPTION = "ADD_PRESCRIPTION";
I have verified all the questions, but cant able to study whats going wrong in my code.Thanks in advance.

Answer 1

You miss following code..
import {ADD_PRESCRIPTION} from '../constant.js';
import axios from 'axios';
import dispatch from 'axios';
export const index_prescription = () => {
return dispatch=>{
const base_url= "http://localhost:3000/api/v1/";
const fetch_url = `${base_url}/prescriptions`;
axios.get(fetch_url)
.then(response => {
dispatch({type: "ADD_PRESCRIPTION", details: response.data})
})
}
}

Answer 2

You are calling dispatch from axions? Is not part of react-redux?
If you use redux-promise-middleware you can do this:
import {ADD_PRESCRIPTION} from '../constant.js';
import axios from 'axios';
import dispatch from 'axios';
export const index_prescription = () => {
const base_url= "http://localhost:3000/api/v1/";
const fetch_url = `${base_url}/prescriptions`;
return {
type: "ADD_PRESCRIPTION",
details: axios.get(fetch_url)
.then(response => {
return response;
})
}
}