React.js Redux действия и редукторы не инициируются - PullRequest
Новая
       7

React.js Redux действия и редукторы не инициируются

0 голосов
/ 08 мая 2018

У меня проблема с приложением React-Redux. Я создал Redux action & reducer и соединил их с моим компонентом React. Тем не менее, похоже, что он никогда не доберется до моего действия и редуктора Redux.

Я включил «отладчик» в свои действия и редуктор, но эти отладчики никогда не запускаются.

Не могли бы вы помочь мне решить эту проблему?

Я что-то здесь упускаю?

Вот текущие коды в следующих файлах:

Вот код для моего app.js: 

import React, { Component } from 'react';
import { render } from 'react-dom';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import ReduxPromise from 'redux-promise';
import rootReducer from './reducers';

import App from './components/index';

const createStoreWithMiddleware = applyMiddleware(thunk, ReduxPromise)(createStore);

render(
  <Provider store={createStoreWithMiddleware(rootReducer)}>
    <App />
  </Provider>, 
  document.getElementById('app')
);

Вот мой код для index.js:

Как вы можете видеть ниже, я помещаю отладчик в "componentDidMount ()", и когда запускается, он попадает в эту точку. 

import React, { Component } from 'react';
import { render } from 'react-dom';
import { connect } from 'react-redux';
import * as AllNewsApiActions from '../actions/newsApiActions';

import '../../css/style.css';

class App extends Component {

  componentDidMount() {
  	this.props.getNewsApi();
  	debugger;
  }

  render() {

    return (
      <div>
        <p>Hello from react</p>
        <p>Sample Testing</p>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
    newNews: state.newNews
});


export default connect(mapStateToProps, {
  ...AllNewsApiActions
})(App);

Вот мое действие: 

import * as types from './newsTypes';

const API_KEY = "6c78608600354f199f3f13ddb0d1e71a";

export const getNewsApi = () => {
  debugger;
  return (dispatch, getState) => {
    dispatch({
      type: 'API_REQUEST',
      options: {
        method: 'GET',
        endpoint: `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=${API_KEY}`,
        actionTypes: {
          success: types.GET_NEWS_API_SUCCESS,
          error: types.GET_NEWS_API_ERROR
        }
      }
    });
  }
}

Вот мой редуктор: 

import * as types from '../actions/newsTypes';

const initialState = {
  newNews: []
};

const getNewsAPIReducer = (state = initialState, action) => {
  switch(action.type) {
    case types.GET_NEWS_API_SUCCESS:
      debugger;
      return { ...state, newNews: action.data };
      
    case types.GET_NEWS_API_ERROR:
    	debugger;
      return { ...state, error: action.data };

    default: {
      return state;
    };
  };
};

export default getNewsAPIReducer;

Вот файл index.js в папке редуктора: 

import { combineReducers } from 'redux';
import NewsApiReducer from './newsApiReducer.js';

const rootReducer = combineReducers({
  newNews: NewsApiReducer
});

export default rootReducer;
...