Ruby on rails 在React和Redux设置和道具方面有很多问题

我正在构建一个仪表板风格的应用程序，可以显示数据服务中断。后端是Rails 6，我在前端（Rails中）使用React/Redux。在将数据导入前端并将状态映射到道具时，我遇到了很多麻烦（因为我在Redux中是绿色的）。希望有人能看看我的应用程序，看看我哪里出了问题。似乎我在词汇行为方面也有问题

以下是应用程序的顶部：

import React from 'react';
import { render } from 'react-dom'
import Dashboard from './Dashboard';
import { Provider } from "react-redux";
import { createStore, applyMiddleware, compose } from 'redux'; // we get our store from redux library and we need middleware to wire up Thunk
import thunk from 'redux-thunk';

import reducers from './reducers/rootReducer'; 
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap/dist/css/bootstrap.min.css";

const storeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(reducers, storeEnhancers(applyMiddleware(thunk)));

// this is how you hook up
store.subscribe(() => {
    console.log('the new state is', store.getState()); 
    console.log('----------');
});



    render(
        <Provider store={store}>
        <Dashboard />
        </Provider>,
        document.body.appendChild(document.createElement('div')),
    )

以下是

操作

文件的一个示例：

\\ fetchFutureOutagesAction.js 

import axios from 'axios'; 

export const getFutureOutages = () => dispatch => {
    axios.get("/future_outages")
    .then(res => {
       const futureOutages = res.data; 
       dispatch({ type: 'FUTURE_OUTAGES', payload: futureOutages });
    })
       .catch(res => console.log(res.errors)); 
};

const initialState = {
    futureOutages: []
}

export const futureOutagesReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'FUTURE_OUTAGES':
            return { futureOutages: [...state.futureOutages, action.payload] };
        default: 
            return state;
    }
}

我有一个这样的除根器：

import { combineReducers } from 'redux'; 
import { futureOutagesReducer } from './futureOutagesReducer';
import { recurringOutagesReducer } from './recurringOutagesReducer';
import { servicesReducer } from './servicesReducer';
export default combineReducers({
    futureOutages: futureOutagesReducer, 
    recurringOutages: recurringOutagesReducer,
    services: servicesReducer
});

下面是一个

reducer

文件的示例：

\\ fetchFutureOutagesAction.js 

import axios from 'axios'; 

export const getFutureOutages = () => dispatch => {
    axios.get("/future_outages")
    .then(res => {
       const futureOutages = res.data; 
       dispatch({ type: 'FUTURE_OUTAGES', payload: futureOutages });
    })
       .catch(res => console.log(res.errors)); 
};

const initialState = {
    futureOutages: []
}

export const futureOutagesReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'FUTURE_OUTAGES':
            return { futureOutages: [...state.futureOutages, action.payload] };
        default: 
            return state;
    }
}

错误发生在我从'Dashboard.jsx'向下传递道具的

容器

文件中：

import React from "react";
import FutureOutagesComponent from "../components/FutureOutagesComponent"

const FutureOutagesContainer = props => {

   return (
    <div>
         {props.futureOutages && props.futureOutages.map((futureOutage, idx) => (
           <FutureOutagesComponent key={idx} futureOutage={futureOutage} />
         ))
         }
    </div>
  )

};

export default FutureOutagesContainer;

从“React”导入React；
从“./组件/FutureOutagesComponent”导入FutureOutagesComponent
const FutureOutagesContainer=道具=>{
返回(
{props.futureautages&&props.futureautages.map（（futureautdown，idx）=>(
))
}
)
};
导出默认的FutureOutagesContainer；

当我启动

/bin/webpack dev server.js

，下面是控制台中错误的快照：

---

很明显，这些道具没有被正确地传递。有人能给我一些关于如何更好地实现这一点的建议吗？我的所有功能都只使用React应用程序，但我真的希望通过应用程序更灵活地访问

状态
 根据您的减速器，我认为您需要访问类似这样的未来停机

const mapStateToProps = state => {
  return {
    futureOutages: state.futureOutages.futureOutages
  }
};

减速机的名称是
futuredutages
，它还有一个同名的属性，其值是数组

export default combineReducers({
  // state.futureOutages
  futureOutages: futureOutagesReducer,
  ...
})

访问
状态。futureOutages
将为您提供一个对象，该对象是Refux存储中减速器的完整状态。但是你想要一个特定的属性。因为它是一个对象而不是数组，
array.prototype.map
不是func。HTH.
请发布文本，而不是文本图像。这篇文章可以吗？我需要编辑吗？是的。在reducer中嵌套的额外级别是不必要的-reducer状态可能只是数组本身。好的，太好了。因此，如果我只是
返回[…state.futureOutages，action.payload]
，似乎我就不必担心对象命名问题了。现在我遇到了一个问题，来自
MapStateTrops
的组件道具创建了一个嵌套数组。看起来像未来的停机：[[…]]