Redux 不加载 api

Posted 2023-02-22

【中文标题】Redux 不加载 api

【英文标题】：Redux does not load the api

【发布时间】：2020-07-13 08:01:50

【问题描述】：

这里是 Redux 新手。

我正在学习关于 Redux 的 Udemy 课程，并且正在构建一个“robofriends”应用程序，该应用程序从 api 获取数据并将其返回到我的应用程序中。

我已经按照课程进行，但在最后，没有错误，但内容没有加载。它只是卡在加载中。

在开发者控制台中，我可以通过 Redux 看到该应用已成功从 API 获取数据，但它不会显示它。

这里是有问题的代码：

**

行动：

**

import 
  CHANGE_SEARCH_FIELD,
  REQUEST_ROBOTS_PENDING,
  REQUEST_ROBOTS_SUCCESS,
  REQUEST_ROBOTS_FAILED
 from "./constants";

export const setSearchField = text => (
  type: CHANGE_SEARCH_FIELD,
  payload: text
);

export const requestRobots = () => dispatch => 
  dispatch( type: REQUEST_ROBOTS_PENDING );
  fetch("https://jsonplaceholder.typicode.com/users")
    .then(data => dispatch( type: REQUEST_ROBOTS_SUCCESS, payload: data ))
    .catch(error => dispatch( type: REQUEST_ROBOTS_FAILED, payload: error ));
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

**

减速机：

**

import 
  CHANGE_SEARCH_FIELD,
  REQUEST_ROBOTS_PENDING,
  REQUEST_ROBOTS_SUCCESS,
  REQUEST_ROBOTS_FAILED
 from "./constants.js";
//INITIAL STATE
const initialStateSearch = 
  searchField: ""
;

//SEARCHROBOTS PURE FUNCTION (React docs recommends switch statements)
export const searchRobots = (state = initialStateSearch, action = ) => 
  switch (action.type) 
    case CHANGE_SEARCH_FIELD:
      //Returning a new state and assign action.payload to the new searchField
      return Object.assign(, state,  searchField: action.payload );
    default:
      return state;
  
;

const initialStateRobots = 
  isPending: false,
  robots: [],
  error: ""
;

export const requestRobots = (state = initialStateRobots, action = ) => 
  switch (action.type) 
    case REQUEST_ROBOTS_PENDING:
      return Object.assign(, state,  isPending: true );
    case REQUEST_ROBOTS_SUCCESS:
      return Object.assign(, state, 
        robot: action.payload,
        isPending: false
      );
    case REQUEST_ROBOTS_FAILED:
      return Object.assign(, state, 
        error: action.payload,
        isPending: false
      );
    default:
      return state;
  
;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

**

应用程序

**

import React,  Component  from "react";
import  connect  from "react-redux";
import Cardlist from "../components/Cardlist";
import SearchBox from "../components/SearchBox";
import "./App.css";
import Scroll from "../components/Scroll";
import  ButtonToolbar  from "react-bootstrap";
import  setSearchField, requestRobots  from "../actions.js";

//State to listen for
const mapStateToProps = state => 
  return 
    searchField: state.searchRobots.searchField,
    robots: state.requestRobots.robots,
    isPending: state.requestRobots.isPending,
    error: state.requestRobots.error
  ;
;

//State to listen for and dispatch
const mapDispatchToProps = dispatch => 
  return 
    onSearchChange: event => dispatch(setSearchField(event.target.value)),
    onRequestRobots: () => dispatch(requestRobots())
  ;
;

class App extends Component 
  componentDidMount() 
    this.props.onRequestRobots();
  

  render() 
    const  searchField, onSearchChange, robots, isPending  = this.props;
    const filteredRobots = robots.filter(robot => 
      return robot.name.toLowerCase().includes(searchField.toLowerCase());
    );
    return !isPending ? (
      <h1>Loading</h1>
    ) : (
      <div className="tc">
        <h1 className="f1">Robofriends</h1>
        <SearchBox searchChange=onSearchChange />
        <Scroll>
          <Cardlist robots=filteredRobots />
        </Scroll>
      </div>
    );
  


//'Connect' connects this app container to the redux state
export default connect(mapStateToProps, mapDispatchToProps)(App);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

索引文件

import React from "react";
import ReactDOM from "react-dom";
import  Provider, connect  from "react-redux";
import  createStore, applyMiddleware, combineReducers  from "redux";
import  createLogger  from "redux-logger";
import thunkMiddleware from "redux-thunk";
import "./index.css";
import App from "./containers/App.js";
import * as serviceWorker from "./serviceWorker";
import  searchRobots, requestRobots  from "./reducers";
import "tachyons";
import "bootstrap/dist/css/bootstrap.min.css";

const logger = createLogger();
const rootReducer = combineReducers( searchRobots, requestRobots );
const store = createStore(
  rootReducer,
  applyMiddleware(thunkMiddleware, logger)
);

ReactDOM.render(
  //Provides store to all components
  <Provider store=store>
    <App />
  </Provider>,
  document.getElementById("root")
);

   
serviceWorker.unregister();

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

**

控制台窗口：

**

所以它应该显示这个：

How it is supposed to work

但它只是停留在这个：

Cannot get past the loading

谁能帮我解决这个问题？我希望一切都清楚！

谢谢

【问题讨论】：

我只是想知道你为什么不使用create-react-app 或react-boilerplate？

我只是在学习入门课程，但是我使用 create-react-app 来创建应用程序？

我现在很开心 :)

jsonplaceholder.typicode.com/users 无法访问，因此请确保您可以访问它，然后重试。到目前为止，您的代码看起来还不错。

@JothamArdel 谢谢！！

【参考方案1】：

你的 index.js 文件在哪里......？

您是否将reducer 连接到root reducer，因为否则您做得很好.. 或共享开发者控制台wndow 或错误类型

【讨论】：

Study Mania，我在原帖中包含了 index.js 和控制台，感谢您指出这一点。我在那里有 rootReducer - 关于它可能是什么的任何想法？我不认为它的 API..

它看起来像 promisr 同步问题

我该如何解决这个问题？

当你的函数体需要等待特定进程时，你可以用异步解决同步问题，但我们知道 java 脚本是单线程和基于队列的语言，这就是为什么你不能在没有异步的情况下执行.....所以答案是“const function = async () => ... function bdy ..... const sync = await you variable value ”但我认为只要条件满足这个条件，你就可以解决这个错误。询问 ？ “执行你的行动”：void 0