连接的组件未收到商店道具 n Redux [英] Connected component not receiving store props n Redux

问题描述

我进行了一些重构，并尝试使用 connect() 将更高级别的组件连接到 redux，但我连接的组件一直给我空的 props.

I was doing a bit of refactoring and tried connecting a higher level component to redux using connect() but the component I'm connecting keeps giving me empty props.

我已经包含了相关的代码，我已经将我的 redux 减速器组织成一个 ducks 格式，因此操作/创建器和化简器位于一个模块文件中.

I've included the relevant code, I've structured my redux reducers into a ducks format, so the actions/creators and reducers are in one module file.

文件是 containers/login.js, presentation/login.js, presentation/logins.js, app.js 和根 index.js.

The files are containers/login.js, presentation/login.js, presentation/logins.js, app.js and the root index.js.

当我决定重命名一些动作、文件和减速器，将连接移到更高的组件时，连接停止工作，现在我有空的道具.

When I decided to rename some actions, files and reducers, moved the connect to a higher component, the connection stopped working and now I have empty props.

非常感谢帮助.

// 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')
    );

推荐答案

您在 Login 组件中的 props 为空的原因是因为您实际上没有使用连接的 Login 容器，正如您在 containers/login 中提到的

The reason your props in Login component are empty is because you are not actually using the connected Login container, As you have mentions its in containers/login

因此，在您的 App.js 中，将登录的导入从 ./presentation/login 更改为

So in your App.js change the import of login from ./presentation/login to

import Login from '/path/to/containers/Login';

这篇关于连接的组件未收到商店道具 n Redux的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！