Reactjs 创建存储然后传递值时出现问题​；映射StateToprops

我创建了一个redux存储并从reducer传递了数据，但它给出了一个错误“无法读取未定义的属性‘color’”

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import store from "./store/store";
import {Provider} from "react-redux";

let rerender=()=> {
    ReactDOM.render(
        <React.StrictMode>
            <Provider store={store}>
            <App/>
            </Provider>
        </React.StrictMode>,
        document.getElementById('root')
    );
}
rerender();
store.subscribe(()=>{
    rerender()
})
serviceWorker.unregister();

减速器：

let data={
    color:"#bf3636",
    width:20,
    height:20,
    count:2,
    inputs:{}
};
export  const MainReducer=(state=data,action)=>{
//process
}

容器：

import React from "react";
import {connect} from "react-redux";
import {ChangeColorAC} from "../store/mainReducer";
import {DataFilling} from "./DataFilling";

let MapStateToProps=(state)=>{
    return {
        color:state.MainReducer.color
    }
};
export const DataFillingContainer=connect(MapStateToProps,{ChangeColorAC})(DataFilling)

---

但是，当你添加组合减速机时，一切都奇迹般地开始工作。怎么了？

如果我正确理解了您的源代码，那么您犯了一个错误，然后创建了存储

应该是什么样子

store.getState() === {
    color:"#bf3636",
    width:20,
    height:20,
    count:2,
    inputs:{}
}

减速器

const data={
    color:"#bf3636",
    width:20,
    height:20,
    count:2,
    inputs:{}
};
export  const MainReducer=(state=data,action)=>{
   switch(action.type) {
   ...
   default:
     return state;
  }
}

import React from "react";
import {connect} from "react-redux";
import {ChangeColorAC} from "../store/mainReducer";
import {DataFilling} from "./DataFilling";

const mapStateToProps=(state)=>{
    return {
        color:state.mainReducer.color
    }
};
export const DataFillingContainer=connect(mapStateToProps,{ChangeColorAC})(DataFilling)

rootReducer.js

import { combineReducers } from 'redux';
import {MainReducer} from "./mainReducer";


const reducers = {
  mainReducer: MainReducer,
};

export default combineReducers(reducers);

import React from "react";
 import {combineReducers, createStore} from "redux";
 import rootReducer from "./rootReducer";
 const store=createStore(rootReducer);
 export default store;

store.js

import { combineReducers } from 'redux';
import {MainReducer} from "./mainReducer";


const reducers = {
  mainReducer: MainReducer,
};

export default combineReducers(reducers);

import React from "react";
 import {combineReducers, createStore} from "redux";
 import rootReducer from "./rootReducer";
 const store=createStore(rootReducer);
 export default store;

容器

const data={
    color:"#bf3636",
    width:20,
    height:20,
    count:2,
    inputs:{}
};
export  const MainReducer=(state=data,action)=>{
   switch(action.type) {
   ...
   default:
     return state;
  }
}

import React from "react";
import {connect} from "react-redux";
import {ChangeColorAC} from "../store/mainReducer";
import {DataFilling} from "./DataFilling";

const mapStateToProps=(state)=>{
    return {
        color:state.mainReducer.color
    }
};
export const DataFillingContainer=connect(mapStateToProps,{ChangeColorAC})(DataFilling)

更新 在redux的例子中

function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

let store = createStore(counter)
store.subscribe(() => console.log(store.getState()))

它们的存储形状看起来像

store.getState（）==number

在您的代码中，商店的形状如下

store.getState() === {
    color:"#bf3636",
    width:20,
    height:20,
    count:2,
    inputs:{}
}

你希望有一个商店的形状

store.getState() === {
    MainReducer: {
     color:"#bf3636",
     width:20,
     height:20,
     count:2,
     inputs:{}
    }
}

如果您想要命名还原器，您需要使用combineReducer编写。如果希望直接访问值，则需要将mapStateToProps更改为

const mapStateToProps=(state)=>{
    return {
        color:state.color
    }
};

---

你能附上你的mainReducer文件吗？我想你的减速机的名字和“主减速机”不一样，我的减速机叫“主减速机”，因为它是唯一的减速机。我补充了我的答案。我认为这有助于）你误解了我一点，有了CombineReducer，我的程序也能工作，但没有它就不行了。医生们说，没有联合传感器可以做什么。我正在尝试实现它，但它不起作用。老实说，我在官方文件中没有看到类似的东西。你能给我发一个链接吗？这样我就可以看一看并帮你找出问题所在）非常感谢，我理解缺陷