Question

我正在开发我的第一个反应应用程序，并且我已经成功设置了我的Node API和MongoDB，现在我正在尝试将redux集成到我的应用程序中。我将尝试在此处分享相关的代码段。

首先，在我的节点API中，我有一个带有一些棒球数据的模型 mlb_ids_logos_colors.js 。我的react应用程序当前使用异步函数使用以下获取来获取此数据：

export async function get_mlb_ids_logos_colors() {
    return fetch('/mlb/mlb_ids_logos_colors')
    .then(resp => { 
        return resp.json();
    })
}

我想从这个端点获取数据到我的redux商店，然后从redux商店获取将使用它的各种组件，但我有点卡住了。至于redux，我有以下文件：

reducers / index.js（我的rootReducer）

import { combineReducers } from 'redux';
import mlbIdsLogosColorsReducer from './mlb-ids-logos-colors-reducer';

export default combineReducers({
    mlbIdsLogosColorsReducer
})

减速器/ MLB-IDS-徽标-颜色-reducer.js

export default function reducer (state={
  mlbIdsLogosColorsData: [],
}, action) {

  switch (action.type) {
    case "FETCH_COLORS": {
      return {...state, mlbIdsLogosColorsData }
    }
  }
  return state;
}

操作/ MLB-IDS-徽标-颜色-action.js

export const FETCH_COLORS = "FETCH_COLORS";

export function fetchMlbIdsLogosColors() {
  return function(dispatch) {
    dispatch({type: "FETCH_COLORS"});

    fetch('/mlb/mlb_ids_logos_colors')
    .then(resp => {
      return resp.json();
    })
  }
}

最后，我在** store.js *中设置了我的商店，如下所示，并将其导入我的应用程序主index.js文件：

store.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};
const middleware = [thunk];
const store = createStore(
    rootReducer, 
    initialState,
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

export default store;

对此有任何帮助表示赞赏。作为参考，我在启动应用程序时收到以下错误：

./src/reducers/mlb-ids-logos-colors-reducer.js
Line 7:  'mlbIdsLogosColorsData' is not defined  no-undef

我知道这是一个非常明显的错误信息，但是我很不确定我应该在哪里定义mlbIdsLogosColorsData。

提前致谢！

编辑：我不必对my / mlb / mlb_ids_logos_colors端点的数据进行任何更改。我只想将这些数据放入redux商店，然后从redux商店进入组件。我知道在我的组件中使用mapStateToProps（）和connect（）来将数据导入组件。

EDIT2：我的行动有不同的名字！让我解决这个问题，看看是否能解决问题！

Answer 1

如果我误导你，我很着急，但粗略地说你正在派遣没有数据的行动。你应该在你的行动创造者中使用类似的东西：

export default function reducer (state={
  mlbIdsLogosColorsData: [],
}, action) {

  switch (action.type) {
    case "FETCH_COLORS": {
      return {...state, mlbIdsLogosColorsData: action.json }
    }
  }
  return state;
}

然后在你的reducer中使用这个有效负载（json）：

matplotlib

同样，这是一个粗略的建议。我没有检查你的整个代码。但是你得到了未定义的错误，因为现在还没有名为mlbIdsLogosColorsData的变量。

将MongoDB中的数据加载到从我的节点API

1 个答案: