Reactjs 无法从Redux存储中获取值

从Redux存储检索数据时遇到问题。Redux logger正在显示数据，但似乎无法将其渲染。以下是我的容器组件和我的操作/减速器的代码：

//COMPONENT:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchGrade } from '../../modules/smiles';

class Main extends Component {
  componentDidMount() {
    this.props.fetchSmile();
    console.log(this.props);
  }

  render() {
    const { smiles } = this.props;
    return (
      <div>
        <h1>This is the Main Component</h1>
      </div>
    );
  }
}

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

const mapDispatchToProps = dispatch => {
  return {
    fetchSmile: params => dispatch(fetchGrade(params))
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Main);

//ACTION/REDUCER:
import axios from 'axios';
const ADD_GRADE = 'SMILES/ADD_GRADE';

export function reducer(state = {}, action) {
  switch (action.type) {
    case ADD_GRADE:
      return {
        ...state,
        grade: action.payload
      };

    default:
      return state;
  }
}

export const fetchGrade = () => {
  return dispatch => {
    axios
      .get('/api/test')
      .then(res => dispatch({ type: ADD_GRADE, payload: res.data }));
  };
};

//STORE:
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import logger from 'redux-logger';
import reducer from '../modules';

let store;

export function configureStore(state: {}) {
  if (!store) {
    store = createStore(
      reducer,
      state,
      composeWithDevTools(applyMiddleware(logger, thunk))
    );
  }

  return store;
}

//INDEX.JS:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';

import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { configureStore } from './store';

window.store = configureStore();

render(
  <Provider store={window.store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

registerServiceWorker();

//组件：
从“React”导入React，{Component}；
从'react redux'导入{connect}；
从“../../modules/smiles”导入{fetchGrade}；
类主扩展组件{
componentDidMount（）{
this.props.fetchSmile（）；
console.log（this.props）；
}
render（）{
const{smiles}=this.props；
返回(
这是主要组成部分
);
}
}
常量mapStateToProps=状态=>{
返回{smiles:state.smiles}；
};
const mapDispatchToProps=调度=>{
返回{
fetchSmile:params=>dispatch（fetchGrade（params））
};
};
导出默认连接（mapStateToProps、mapDispatchToProps）（主）；
//作用/减速器：
从“axios”导入axios；
const ADD_GRADE='SMILES/ADD_GRADE'；
导出函数缩减器（状态={}，操作）{
开关（动作类型）{
案例添加等级：
返回{
……国家，
等级：action.payload
};
违约：
返回状态；
}
}
导出常量fetchGrade=（）=>{
返回调度=>{
axios
.get（“/api/test”）
.then（res=>dispatch（{type:ADD_GRADE，payload:res.data}））；
};
};
//商店：
从“redux”导入{createStore，applyMiddleware}；
从“redux thunk”导入thunk；
从'redux devtools extension'导入{composeWithDevTools}；
从“redux记录器”导入记录器；
从“../modules”导入减速机；
让商店；
导出函数configureStore（状态：{}）{
如果（！存储）{
store=createStore(
减速器，
国家,，
带有开发工具的组件（applyMiddleware（记录器，thunk））
);
}
退货店；
}
//INDEX.JS：
从“React”导入React；
从'react dom'导入{render}；
从'react redux'导入{Provider}；
导入“./index.css”；
从“./components/App”导入应用程序；
从“./registerServiceWorker”导入registerServiceWorker；
从“/store”导入{configureStore}；
window.store=configureStore（）；
渲染(
,
document.getElementById（'root'））
);
registerServiceWorker（）；

---

我真的不知道这是复杂的还是容易解决的。我觉得我做的每件事都很好，但运气不佳。

你给你的减速机命名了，

减速机

：

export function reducer(state = {}, action) {

似乎您忘记了从

reducer

对象访问它。应该是这样的：

const mapStateToProps = state => {
  return { smiles: state.reducer.smiles };
};

---

您能否提供模块目录下reducer.js文件的代码？以下是模块控制器中reducer文件中的代码：从“axios”导入axios；const ADD_GRADE='SMILES/ADD_GRADE'；导出函数缩减器（state={}，action）{switch（action.type）{case ADD_GRADE:return{…state，GRADE:action.payload}；默认值：return state；}}}}export const fetchGrade=（）=>{return dispatch=>{axios.get（'/api/test'）。然后（res=>dispatch({type:ADD_GRADE，payload:res.data}；}；}；我正在询问您为configureStore导入的减速机的代码。

从“../modules”导入减速机；

-这一个很抱歉：从“redux”导入{combinereducer}；从“/smiles”导入{reducer as smiles}；导出默认的组合减速机（{smiles}）；是渲染函数中的

console.log（smiles）

给出了

未定义的

？不幸的是，这对我不起作用。我得到了一个对象未定义错误