React-Redux-Saga TypeError: Невозможно прочитать свойство 'data' из null - PullRequest
0 голосов
/ 10 апреля 2019

Пожалуйста, дайте мне знать, что я застрял за последние 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 возвращает данные. Но в редукторе я делаю неправильно, я понятия не имею. Пожалуйста, позвольте мне знать

1 Ответ

0 голосов
/ 10 апреля 2019

Это сработало как чудовищное чудовище :). Через три дня уффф. Я выучил много достойного. Поговорка для меня верна: «Мы учимся на своих ошибках» Благодаря @ RussCoder

adminSaga.js

                    try{
                        const salesDataPerYear=yield fetch("https://api.myjson.com/bins/78b9w")
                                .then(response=>response.json())
                        yield put({type:SALES_DATA_RECEIVED,payload:salesDataPerYear.data})
                    }

adminReducer.js

                    case SALES_DATA_RECEIVED:
                    return {...state,payload:action.payload };  

dashbord.js

   const mapStateToProps=state=>{
      return{   
        dataSales:state  //have changes data to dataname
      }
     };
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...