Reactjs 连接的组件未接收存储道具n Redux

我进行了一些重构，并尝试使用

connect（）

将更高级别的组件连接到redux，但我连接的组件一直没有给我任何支持

我已经包含了相关的代码，我已经将我的redux简化程序结构化为一种格式，因此操作/创建者和简化程序都在一个模块文件中

这些文件是

containers/login.js

，

presentation/login.js

，

presentation/logins.js

，

app.js

和根

index.js

当我决定重命名一些动作、文件和还原程序，将连接移动到更高的组件时，连接停止工作，现在我有了空的道具

非常感谢你的帮助

// containers/login.js
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom'
import { fetchPage } from '../redux/modules/Login';
import Login from '../presentation/Login';

const mapStateToProps = (state) => {
  return {
    page: state.page,
    forms: state.forms
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
      fetchPage: () => dispatch(fetchPage())
  } // here we're mapping actions to props
}

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

// redux/modules/login.js
import fetch from 'cross-fetch';

const RECIEVE_FORM = 'RECIEVE_FORM';

export const receiveForm = (response) => ({
  type: RECIEVE_FORM,
  forms: response.forms
})

const initialState = {
  page: "",
  forms: []
}

// MIDDLEWARE NETWORK REQUEST DISPATCHER
export const fetchPage = () => {
  return dispatch => {
    return fetch('http://localhost:3001/login')
    .then(
      response => response.json(),
    )
    .then(
      response => dispatch(receiveForm(response))
    )
  }
}

// REDUCER COMPOSITION CALL EXISTING REDUCERS
// REDUCER COMPOSITION PATTERN
// ACCUMULATIVE ACTION REDUCER
export default function Login(state = initialState, action){
  switch (action.type){
    case RECIEVE_FORM:
    return {
      ...state,
      forms: action.forms
    }
    default:
    return state;
  }
}

// presentation/login.js
import React, { Component } from 'react';
import styled from 'styled-components';
import Wrapper from '../components/Wrapper';
import Card from '../components/Card';
import Text from '../components/Text';
import Logo from '../components/Logo';
import FormGroup from '../components/FormGroup';


const WrapperLogin = styled(Wrapper)`
    .login__card{
        padding: 4.5rem 2.5rem 2rem 2.5rem;
    }
`;

const BoxLogo = styled.div`
    .login__logo{
        display: block;
        margin: 0 auto;
    }
`;

export default class Login extends Component{

  componentDidMount() {
    console.log(this.props)
    //this.props.fetchPage();
  }

    render(){
        return(
            <main>
                <WrapperLogin className="login">
                    <Card className="login__card">
                        <BoxLogo>
                            <Logo className="login__logo" width={187.36} height={76.77} />
                        </BoxLogo>
                        <FormGroup name="login" className="login_formGroup" />
                    </Card>
                    <Text primitive="p" margin='4px 0 0 0' size="0.8rem" textAlign="center" display='block'>Brought to you by WORLDCHEFS</Text>
                </WrapperLogin>
            </main>
        )
    }
}

// app.js
// manage routes here
//import _ from 'lodash';
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import { ThemeProvider } from 'styled-components';
import Login from './presentation/Login';

type Props = {

}

type State = {
  mode: string
};




export default class App extends Component <Props, State> {

  constructor(){
    super();
    this.state = {
      ...this.state,
      mode: 'mobile'
    }
  }

  render(){
    return(
      <ThemeProvider theme={{ mode: this.state.mode }}>
        <Login />
      </ThemeProvider>
    )
  }

}

     // root
    import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './redux/configureStore';
import registerServiceWorker from './registerServiceWorker';
import App from './App';
import { injectGlobal } from 'styled-components';
import styles from './assets/styles';

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

//containers/login.js
从'react redux'导入{connect}；
从“react router dom”导入{withRouter}
从“../redux/modules/Login”导入{fetchPage}；
从“../presentation/Login”导入登录名；
常量mapStateToProps=（状态）=>{
返回{
page:state.page，
表格：state.forms
}
}
const mapDispatchToProps=（调度）=>{
返回{
fetchPage:（）=>分派（fetchPage（））
}//这里我们将动作映射到道具
}
导出默认连接(
MapStateTops，
mapDispatchToProps
)（登入）；
//redux/modules/login.js
从“交叉提取”导入提取；
const receive_FORM='receive_FORM'；
导出常量receiveForm=（响应）=>({
类型：接收表格，
表格：response.forms
})
常量初始状态={
第页：“，
表格：[]
}
//中间件网络请求调度器
导出常量fetchPage=（）=>{
返回调度=>{
返回获取（'http://localhost:3001/login')
.那么(
response=>response.json（），
)
.那么(
响应=>发送（接收表单（响应））
)
}
}
//减速器组合调用现有减速器
//还原剂组成模式
//累加减速器
导出默认函数登录（状态=初始状态，操作）{
开关（动作类型）{
案件受理表：
返回{
……国家，
形式：action.forms
}
违约：
返回状态；
}
}
//演示文稿/login.js
从“React”导入React，{Component}；
从“样式化组件”导入样式化；
从“../components/Wrapper”导入包装器；
从“../components/Card”导入卡片；
从“../components/Text”导入文本；
从“../components/Logo”导入徽标；
从“../components/FormGroup”导入FormGroup；
const WrapperLogin=styled（包装器）`
.登录卡{
填充物：4.5雷姆2.5雷姆2.5雷姆；
}
`;
const-BoxLogo=styled.div`
.login\u徽标{
显示：块；
保证金：0自动；
}
`;
导出默认类登录扩展组件{
componentDidMount（）{
console.log（this.props）
//this.props.fetchPage（）；
}
render（）{
返回(
世界厨师为您带来的
)
}
}
//app.js
//在这里管理路线
//从“lodash”进口；
从“React”导入React，{Component}
从“react Router dom”导入{BrowserRouter as Router，Route，Redirect}；
从“样式化组件”导入{ThemeProvider}；
从“./presentation/Login”导入登录名；
类型道具={
}
类型状态={
模式：字符串
};
导出默认类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
…这个州，
模式：“移动”
}
}
render（）{
返回(
)
}
}
//根
从“React”导入React；
从“react dom”导入react dom；
从'react redux'导入{Provider}；
从“/redux/configureStore”导入configureStore；
从“./registerServiceWorker”导入registerServiceWorker；
从“./App”导入应用程序；
从“样式化组件”导入{injectGlobal}；
从“./assets/styles”导入样式；
const store=configureStore（）；
ReactDOM.render(
，document.getElementById（'root'））
);

您在app.js中导入了演示组件，而不是容器组件。请导入容器组件，如下所示

import Login from './containers/login.js';

---

根据我对您的代码的理解，这将解决问题。登录组件中的道具为空的原因是您没有实际使用连接的登录容器，正如您在

容器/Login

因此，在App.js中，将登录名的导入从

/presentation/login

更改为

---

从'/path/to/containers/Login'导入登录名
啊，谢谢！每次我认为我有重复使用，我总是犯这样的业余错误！是的，确实是这样！抱歉，我不得不用答案给上面的人打上标记，因为他有一张赞成票。不，问题。解决方案最重要：）