Reputation: 227
Hi I am new to Redux I am currently working in a feature I tried going to others posts, but there were not much help for me.
The issue
I successfully make a call to my API however, I see that for some reason its not returning any data. When I see the XHR tab on my console I see an HTTP 200 and there is a payload, but I don't see any errors, making me unsure as to why I am not seeing any data being returned. I see the that my saga file is calling my action CREATE_MATRIX_REQUEST, then right away it call CREATE_MATRIX_SUCCESS. I really don't know why this is happening, any help will be appreciated
actions.js
import {
CREATE_MATRIX_REQUEST,
CREATE_MATRIX_SUCCESS,
CREATE_MATRIX_ERROR
} from './constants';
/**
* Tells the app we want to create a matrix request
*/
export function createMatrixRequest(data) {
return { type: CREATE_MATRIX_REQUEST, data};
}
/**
* Tells the app the matrix request was succesfully made
*/
export function createMatrixSuccess(data) {
return { type: CREATE_MATRIX_SUCCESS, data };
}
/**
* Tells the app the matrix request failed
*/
export function createMatrixError(error) {
return { type: CREATE_MATRIX_ERROR , error };
}
reducer.js
/*
* The reducer takes care of state changes in our app through actions
*/
import { fromJS } from 'immutable';
import {
CREATE_MATRIX_REQUEST,
CREATE_MATRIX_SUCCESS,
CREATE_MATRIX_ERROR
} from './constants';
// The initial application state
const initialState = fromJS({
success: false,
error:''
});
// Takes care of changing the application state
function createMatrixReducer(state = initialState, action) {
switch (action.type) {
case CREATE_MATRIX_REQUEST:
return state;
case CREATE_MATRIX_SUCCESS:
console.log(action, 'This is a paylaod')
return state.set('success', true);
case CREATE_MATRIX_ERROR:
return state.set('error', action.payload);
default:
return state;
}
}
export default createMatrixReducer;
sagas.js
import { call, put } from 'redux-saga/effects';
import { takeEvery } from 'redux-saga/effects'
import { createMatrix } from './utils';
import { browserHistory } from 'react-router';
import { CREATE_MATRIX_REQUEST, CREATE_MATRIX_SUCCESS, CREATE_MATRIX_ERROR } from './constants';
export function* createMatrixSaga(action) {
try {
//Calls the API and sends payload
const data = yield call(createMatrix, action.data);
// We send an action that tells Redux we're sending a payload
yield put({type: CREATE_MATRIX_SUCCESS, success: data});
//Forward to /reports once actions is sent
yield call(forwardTo, '/reports');
} catch(error) {
// We send an action that tells Redux we're sending an error
yield put({type: CREATE_MATRIX_ERROR, error: error });
}
}
function* watchFetchData() {
// We send an action that tells Redux we're sending a request
yield takeEvery(CREATE_MATRIX_REQUEST, createMatrixSaga);
}
export default [
watchFetchData,
];
// Little helper function to abstract going to different pages
export function* forwardTo(location) {
yield call(browserHistory.push, location);
}
utils.js
import axios from 'axios';
import cookie from 'react-cookie';
export function createMatrix({domain, kw}) {
var token = cookie.load('token');
var url = '';
var keywords = kw;
var encoded = encodeURI(keywords);
var data = {
key: token,
keywords: encoded,
analysisname: domain,
country:1,
location:null,
trafficstats:false,
use_majestic_api:false
}
axios.post(url, data).then((response) => {
return response
})
.catch((error) => {
throw error
});
}
export default createMatrix;
Upvotes: 3
Views: 5412
Reputation: 378
If there are the payloads, I think the problems is at axios post result, for example:
import axios from 'axios';
import cookie from 'react-cookie';
export function createMatrix({domain, kw}) {
var token = cookie.load('token');
var url = '';
var keywords = kw;
var encoded = encodeURI(keywords);
var data = {
key: token,
keywords: encoded,
analysisname: domain,
country:1,
location:null,
trafficstats:false,
use_majestic_api:false
}
return axios.post(url, data).then((response) => {
return response.data
})
.catch((error) => {
throw error
});
}
export default createMatrix;
Upvotes: 4