创建存储然后传递值的问题​映射StateToProps

Question

我创建了一个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();

store.js:

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

减速器：

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)

但是，当你添加combineReducers时，一切都会奇迹般地开始工作。怎么了？

Answer 1

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

它应该看起来像

减速器

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

rootReducer.js

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

const reducers = {
mainReducer: MainReducer,
};
export default combineReducers(reducers);

store.js

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

集装箱

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
}
};