Question

我的React-Redux应用程序存在问题。我创建了Redux动作＆amp; reducer并将它们连接到我的React组件。然而，它似乎永远不会到达我的Redux动作＆amp;减速器。

我把＆＃34;调试器＆＃34;在我的动作和减速器中，但那些调试器永远不会启动。

你能帮我解决这个问题吗？

我在这里错过了什么吗？

以下文件中的当前代码：

以下是我app.js的代码：

＆＃13;

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')
);

＆＃13;

这是我的index.js代码：

正如您在下面所看到的，我将调试器放在＆＃34; componentDidMount（）＆＃34;中，当运行它时，它就到达那一点。

＆＃13;

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);

＆＃13;

这是我的行动：

＆＃13;

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
        }
      }
    });
  }
}

＆＃13;

这是我的减速机：

＆＃13;

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;

＆＃13;

这是reducer文件夹中的index.js文件：

＆＃13;

import { combineReducers } from 'redux';
import NewsApiReducer from './newsApiReducer.js';

const rootReducer = combineReducers({
  newNews: NewsApiReducer
});

export default rootReducer;

＆＃13;

React.js Redux操作和Reducer不会被启动

0 个答案: