Javascript Redux应用程序嵌套状态中的mapStateToProps（）是否在状态中？

我遇到了一个难题，试图弄明白为什么我在state上获取和存储的JSON数据没有映射到我的组件道具，而是在

console.log（）

从

mapstateTrops（）函数中导出时出现。我做错了什么我在这里看不到的事吗

编辑：显然，状态上的属性正在映射到组件，但已嵌套。当从
MapStateTrops（）
中记录
data
属性时，必须通过
state.state.data
访问该属性。在此之前（请参阅reducer），当记录
动作数据时，数据将按预期显示。没有奇怪的筑巢。
connect
功能可能有问题

查看如何在状态对象中填充状态属性：


以下是我的组件：

class ViewSelector extends Component {
  componentWillMount() {
    this.props.fetchDataAsync('VIEW ALL');
  }

  selectView(event) {
    // this.props.data comes up undefined despite state being mapped
    // to the component props
    console.log('props: ' + this.props.data);
    this.props.filterData(event.target.innerHTML, this.props.data);
  }

  render() {
    return (
      <section>
        <nav>
          <button onClick={this.selectView.bind(this)}>VIEW ALL</button>
          <button onClick={this.selectView.bind(this)}>VIEW LAST WEEK</button>
          <button onClick={this.selectView.bind(this)}>VIEW LAST MONTH</button>
        </nav>
        <Dashboard data={this.props.data}/>
      </section>
    );
  }
}

function mapStateToProps(state) {
  console.log(state);
  // this console.log shows the state with the data property.
  return {
    data: state.data
  };
}

export default connect(mapStateToProps, actions)(ViewSelector);

行动创造者澄清向减速机发送的信息：

export function fetchData() {
  return {
    type: FETCH_DATA
  };
}

export function fetchDataSuccess(data) {
  return {
    type: FETCH_DATA_SUCCESS,
    data: data
  };
}

export function fetchDataFailure(data) {
  return {
    type: FETCH_DATA_FAILURE,
    data
  };
}

export function filterData(view) {
  return {
    type: FILTER_DATA,
    view
  };
}

export function fetchDataAsync() {
  return dispatch => {
    dispatch(fetchData());

    axios.get(DATA_URL)
    .then(res => {
      dispatch(fetchDataSuccess(res.data));
    }).catch(err => {
      dispatch(fetchDataFailure(err));
    });
  };
}

整个应用程序的呈现方式&Redux商店：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('.container'));

从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“redux”导入{createStore，applyMiddleware}；
从“redux thunk”导入thunk；
从“./components/App”导入应用程序；
从“./reducers”导入减速机；
const createStoreWithMiddleware=applyMiddleware（thunk）（createStore）；
ReactDOM.render(
，document.querySelector（'.container'）；
因此您的
MapStateTops
数据的值
正在返回一个对象。您可能希望这样：

function mapStateToProps(state) {
  console.log(state);
  // this console.log shows the state with the data property.
   return {
     ...state.app
   };
 }

这将允许您访问
数据中的字段。此外，从示例中还不清楚您将如何使用数据，或者其中包含哪些字段。此外，首先，对于要使用的字段，reducer没有初始化为null或空值，这肯定会导致错误。最好从
initialState
对象开始：

const initialState = {
  error: '',
  loading: false,
  data: []
};

const app = (state=initialState, action) => {
 /* .... */

经过多次审查、调试并询问其他开发人员之后，简言之，这就是我所面临的问题：减速器以及如何将其导入主“清单”文件以管理所有其他减速器

基本上，因为我在这个项目中只使用了一个reducer，所以不需要清单reducer文件。见下文：

import { combineReducers } from 'redux';
import Reducer from './reducer';

const rootReducer = combineReducers({
  state: Reducer
});

export default rootReducer;

我不知道这到底是什么筑巢状态。也许是因为，从理论上讲，我们将处理具有不同目的的多个缩减器（如数据缩减器和用户缩减器），并且需要将它们嵌套到状态树中进行管理

state = {
  // here is one nested reducer with its own properties
  data: {
    type: // somevalue,
    filtered: true
  },
  // here is another
  user: {
    name: // somename,
    password: // somepassword
  }
};

简言之，请注意如何将减缩器导入到
createStore
函数中，以及是否仅使用减缩器，或者是否有多个减缩器通过各种清单文件运行

干杯。
我在
MapStateTrops
中遇到了类似的问题，在第一次渲染时，它会将初始状态嵌套在具有状态键的对象中。当我使用分派方法更新状态时，它将创建另一个键值对。（控制台中的以下条目是当我在mapStateToProps函数中输入控制台日志状态时）

嵌套的初始状态：


我在我的reducer函数中释放了它，我返回了默认情况下的状态

const initialState = {
    stateprop1: false,
    user_text: "empty",
    };

    const reducer1 = (state = initialState, action)             => {
    switch (action.type) {
        case ACTION_TYPES.SUCCESS:
            return {
                ...state,
                stateprop1: true,
            };
        case ACTION_TYPES.FAILURE:
            return {
                ...state,
                stateprop1: false,
            };
        case ACTION_TYPES.USER_INPUT:
            return {
                ...state,
                user_text: action.payload,
            };
        default:
            return {
                state,
            };
    }
};

​相反，如果在默认情况下分散状态，则不会观察到嵌套行为

default:
    return {
        ...state,
    };

现在，如果我在
mapstatetops
函数中控制台log state，我会得到

未嵌套的状态：


我希望这能有所帮助。
mapStateToProps应该以参数的形式获取完整的状态，你到底在问什么？当我返回
{data:state.data}
时，数据数组就出现了。但是，当我尝试使用
this.props.data
访问组件中的数据时，它显示为未定义。所以看起来在路上的某个地方有什么东西迷路了。或者我完全错误地了解了
mapstatetops
正在做什么…从控制台日志中，看起来您在加载数据之前按下了按钮。还有一件事，尝试在map函数中调用
state.state.data
，看起来您的状态格式无效。为我们提供您的减速机。您是如何创建您的店铺的？它应该是：
import{createStore，applyMiddleware}来自'redux'
从“减速器/应用程序”导入应用程序//从示例导出的reducer
const store=createStore（应用程序，mymiddleware）你们有多个减速器吗？你打电话给联合指挥部吗？如果你是…你是对的，你的状态会下降。你已经得到了一半的答案。我刚刚从@cema sp中注意到，出于某种原因，有一个state对象嵌套在另一个state对象中。因此，所有内容都显示为
state.state.data
或
state.state.error
，而不仅仅是
state.data
。我的reducer有问题，但我不确定是什么。CombineReducer将每个reducer的状态嵌套在所使用的键下（因此，在上面的代码中，对于reducer，在state下）。在您的情况下，您不应该调用组合减速器，因为您只有一个减速器。在一个非平凡的应用程序中，你可能会有很多简化程序，每个简化程序都在一个描述性键下（例如，不称为“状态”，而是在你的域中的事物之后调用）。
default:
    return {
        ...state,
    };