Редуктор необработанного отклонения (ошибки) возвращается неопределенным - PullRequest
0 голосов
/ 15 февраля 2019

Сервер выдает ошибку «Unhandled Rejection» при отображении компонента поиска.При написании редукторов я поместил оператор return для обоих случаев.

enter image description here

Код в файле действий:

export const NEWS = "NEWS";

export function news(items) {
    const action = {
        type: NEWS,
        items
    }
    return action;
}

Код в файле редуктора:


import { NEWS } from '../actions';

export default function news

(state = [], action) {
    switch(action.type) {
        case NEWS:
            console.log("News are ",action.items);
            return {...state, news: action.items};
        default:
            return state;
    }
}

Это моя функция поиска.

class Search extends Component {

    constructor(props) {
      super(props);

      this.state = {
        query: ''
      };
    }

    search(){
        console.log('Search button clicked', this.state.query);
        const url = `http://hn.algolia.com/api/v1/search?query=${this.state.query}`;
        // console.log(url);
        fetch(url, {
            method: 'GET'
        }).then(response=> response.json())
        .then(jsonObj => {this.props.news(jsonObj.results)});
    }

Этоэто код NewsResults.js, где я использую функцию mapStateToProps

import React, { Component } from 'react';
import Search from './Search';
import { connect } from 'react-redux';

class NewsResults extends Component {
    render() {
        return (
          <div>
            <h2>
              Search Results:
            </h2>
            <Search/>
          </div>
        )
      }
    };

function mapStateToProps(state) {
    console.log(state)
    return {
        news: state.news
    }
};

export default connect(mapStateToProps, null)(NewsResults);

** Это то, как выглядит мое хранилище редуксов в index.js **

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer, 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.getElementById('root'));
registerServiceWorker();

1 Ответ

0 голосов
/ 15 февраля 2019

Состояние, которое вы передаете редуктору, представляет собой список, которому вы присваиваете значения, как если бы это был объект.изменить редуктор, чтобы иметь состояние = initialState = {}

const initialState = {}
export default function (state = initialState, action) {
switch (action.type) {
        // your cases
    default:
    return state
   }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...