Question

对不起，我的代码非常业余。我最近才开始使用react-redux和javascript。在查看有关可视化状态和商店功能的教程时，我感觉有些疏远。因此，我正在尝试编写代码以在代码中直观地看到它。当为带有react-redux的ASP.NET Web应用程序创建新项目时，我的代码类似于Visual Studio中默认的预加载代码。我只想使用redux调用API，然后将该信息传递给页面。

对于我现在所掌握的内容，我注意到未调用我的API，因为未达到对我的actionCreator的警告。

////////////文件1 CreaterAction和Reducer /////////////////

const requestEvents = 'REQUEST_EVENTS';
const recieveEvents = 'RECEIVE_EVENTS';
const initialState = { events: [], isLoading: false };

async function getData(url) {
    const response = await fetch(url);
    return response.json();
}

export const actionCreators = {
    requestEvents: () => async (dispatch) => {

        dispatch({ type: requestEvents});

        const url = 'api\stuff';
        const events = await getData(url);

        dispatch({ type: recieveEvents, events });
    }
};

export const reducer = (state, action) => {
    state = state || initialState;

    if (action.type === requestEvents) {
        return {
            ...state,
            events: action.events,
            isLoading: true
        };
    }
    return state;
};

//////////////文件2我的实际组件//////////////////

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { actionCreators } from '../store/file1';



class Events extends Component {
    componenetDidMount() {
        this.ensureDataFetched();
    }

    ensureDataFetched() {
        const stuff = this.props.//!!!! Does not show .requestEvents
    }

    render() {
        return (
            <div>
                <h1>Events</h1>
                <p>This component demonstrates fetching data from the server and working with URL parameters.</p>
                {renderData(this.props)}
            </div>
        );
    }
}

function renderData(props) {
    return (
        <p>{props.events}</p>
    );
}

export default connect(
    state => state.events,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(Events);

/////////////// FILE 3 Config Store //////////////////

import { applyMiddleware, combineReducers, compose, createStore } from 'redux';
import thunk from 'redux-thunk';
import { routerReducer, routerMiddleware } from 'react-router-redux';
import * as Counter from './Counter';
import * as file1 from './file1';

export default function configureStore (history, initialState) {
  const reducers = {
    events: file1.reducer
  };

  const middleware = [
    thunk,
    routerMiddleware(history)
  ];

  // In development, use the browser's Redux dev tools extension if installed
  const enhancers = [];
  const isDevelopment = process.env.NODE_ENV === 'development';
  if (isDevelopment && typeof window !== 'undefined' && window.devToolsExtension) {
    enhancers.push(window.devToolsExtension());
  }

  const rootReducer = combineReducers({
    ...reducers,
    routing: routerReducer
  });

  return createStore(
    rootReducer,
    initialState,
    compose(applyMiddleware(...middleware), ...enhancers)
  );
}

它只显示

事件该组件演示了如何从服务器获取数据并使用URL参数。

我的猜测是，这是因为我没有使用过/调用this.props.requestEvents

请求方法未显示在this.props中

0 个答案: