Пожалуйста, дайте мне знать, что я застрял за последние 3 дня. Я новичок в Redux Saga, я не понимаю, где я иду не так. Поскольку я только начал, у меня нет большого опыта, я не очень хорошо понял саги :(. Но я хочу понять это.
Мне нужно показать данные о продажах в линейном графике, следующий мой код
Образец данных Json
{"data":[{"year":"2014","Sales":4390,"Orders":3800},{"year":"2013","Sales":4490,"Orders":4300},{"year":"2015","Sales":2200,"Orders":3400},{"year":"2016","Sales":1280,"Orders":2398},{"year":"2017","Sales":5000,"Orders":4300},{"year":"2018","Sales":4780,"Orders":2908},{"year":"2019","Sales":5890,"Orders":4800}]}
Папка администратора
adminActions.js
import {GET_SALES_DATA} from '../constants/actionTypes';
export const getSales =()=>({
type:GET_SALES_DATA
});
adminReducer.js
import {GET_SALES_DATA,SALES_DATA_RECEIVED} from '../constants/actionTypes';
const adminReducer=(state={},action)=>{
switch(action.type){
case GET_SALES_DATA:
return {...state};
case SALES_DATA_RECEIVED:
return {...state,payload:action.salesDataPerYear} **//issue here payload data is not received state is not getting updated with the data**
default:
return state;
}
}
export default adminReducer;
adminSaga.js
import {put,takeLatest,all} from 'redux-saga/effects';
import {GET_SALES_DATA,SALES_DATA_RECEIVED} from '../constants/actionTypes';
function *getSales(){
console.log("5saga")
const salesDataPerYear=yield fetch("api call")
.then(response=>response.data);
yield put({type:SALES_DATA_RECEIVED,salesDataPerYear:salesDataPerYear})
}
function *actionWatcher(){
yield takeLatest(GET_SALES_DATA,getSales)
}
export default function *rootSaga(){
yield all([
actionWatcher(),
]);
}
dashboard.js
const mapStateToProps=(state)=>({
data:state.salesDataPerYear
})
const mapDispatchToProps = {
getSales:getSales
};
class DashboardMain extends React.Component {
componentDidMount(){
this.props.getSales()
}
render() {
const { classes,data } = this.props;
// const { data } =this.state;
**console.log(data)// data not rendering in console is the saga i've written is correct?**
return (
<div className={classes.root}>
<Grid container spacing={24}>
<Grid item xs={12}>
<SimpleLineChart data={data} />**//commented**
</Grid>
<Grid item xs={12}>
<SimpleTable />
</Grid>
</Grid>
</div>
);
}
}
DashboardMain.propTypes = {
classes: PropTypes.object.isRequired,
};
const Dashboard=connect(mapStateToProps,mapDispatchToProps)(DashboardMain);
simleLineChart.js (ОБНОВЛЕНО)
<LineChart data={ this.props.data }> **// TypeError: Cannot read property 'props' of undefined**
Ниже находится папка магазина
index.js
import createSagaMiddleware from 'redux-saga';
import {createStore,applyMiddleware} from 'redux';
import {logger} from 'redux-logger';
import rootSaga from '../adminDashboard/adminSaga';
import reducers from '../adminDashboard/adminReducers';
const sagaMiddleware=createSagaMiddleware();
const store=createStore(
reducers,
applyMiddleware(sagaMiddleware,logger),
);
sagaMiddleware.run(rootSaga);
export default store;
Данные не отображаются на линейной диаграмме. Я знаю, что в моей саге есть какая-то ошибка, но я не знаю, что это: (.
Может кто-нибудь, пожалуйста, дай мне знать, где я иду не так. Все, что я пропустил. Любая помощь приветствуется.
Обновление
Данные, которые не отображаются в консоли - это сага, которую я написал, это корректор, который я пропустил?
undefined
redux-logger.js:389 action GET_SALES_DATA @ 12:38:06.302
redux-logger.js:400 prev state {}
redux-logger.js:404 action {type: "GET_SALES_DATA"}type: "GET_SALES_DATA"__proto__: Object
redux-logger.js:413 next state {}
adminSaga.js:7 5saga
Response {type: "cors", url: "API call", redirected: false, status: 200, ok: true, …}body: (...)bodyUsed: falseheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "cors"url: "API call"__proto__: Response
redux-logger.js:389 action SALES_DATA_RECEIVED @ 12:38:07.103
redux-logger.js:400 prev state {}__proto__: Object
redux-logger.js:404 action {type: "SALES_DATA_RECEIVED", payload: Response, @@redux-saga/SAGA_ACTION: true}payload: Responsebody: (...)bodyUsed: falseheaders: Headers {}ok: trueredirected: falsestatus: 200statusText: "OK"type: "cors"url: "API call"__proto__: Responsetype: "SALES_DATA_RECEIVED"@@redux-saga/SAGA_ACTION: true__proto__: Object
redux-logger.js:413 next state {payload: undefined}payload: undefined__proto__: Object
Я прокомментировал simpleLineChart, что есть некоторые проблемы с сагой и редуктором. Я не получаю результат. Я обновил журнал, пожалуйста, проверьте. вызов API возвращает данные. Но в редукторе я делаю неправильно, я понятия не имею. Пожалуйста, позвольте мне знать