從React-Redux-Universal-Hot-Example入門工具包中的第3方API初始加載數據

Question

在react-redux-universal-hot-example入門工具包中，我向中間件添加了redux-promise，並使用axios向外部API發出了請求。

在Redux Dev Tools中，我看到了從API調用返回的數據，但是沒有呈現任何內容。 我懷疑我的工作流程有誤。

這是我所做的：

• 我添加了一個Redux模塊weatherForecast.js ，其中包含Action Creator和Reducer

• 我添加了一個容器Forecast.js ，在其中啟動對第三方API的調用並呈現數據。 （不幸的是，我看不到正在渲染的任何數據...）

• 我將預測容器添加到主屏幕（此部分有效）

我的數據加載工作流程是完全錯誤的還是錯過了一些小事情？ 完整的源代碼在這里 。

Answer 1

在CombineReducers中，您具有：

export default combineReducers({
  routing: routeReducer,
  reduxAsyncConnect,
  auth,
  form,
  multireducer: multireducer({
    counter1: counter,
    counter2: counter,
    counter3: counter
  }),
  info,
  widgets,
  outfits,
  weatherForecast
});

在您的連接呼叫中，您具有：

@connect(
    state => ({forecast: state.forecast}),
    {fetchForecast}
)

因此，您錯誤地包含了狀態，應該是

state => ({forecast: state.weatherForecast.forecast}),

如果您從Redux開始，我建議您不要從完整的樣板項目開始，而是從簡單開始，並在需要時添加抽象。