在“连接(注册)”的上下文或道具中找不到“商店”

时间:2018-10-08 12:47:17

标签: reactjs redux

reactjs中的一个新功能,正在使用react-redux开发一个小的注册功能,但是正面临这个错误。我正在遵循某个教程,但现在似乎卡住了

enter image description here

下面是我的代码:

Signup.js

import React, { Component } from 'react';
import  NavBar from './subcomponents/NavBar'
import SignUpForm from './subcomponents/SignUpForm'
import { connect } from 'react-redux'
import {userSignUpRequest} from "./actions/signUpActions";

import PropTypes from 'prop-types';

class Signup extends Component {

    render() {

        const {userSignUpRequest} = this.props;

        return (
            <div>
                <NavBar/>
                <SignUpForm userSignUpRequest={userSignUpRequest}/>

            </div>

        );
    }
}

Signup.propTypes = {

    userSignUpRequest: PropTypes.func.isRequired
}

export default connect(null, { userSignUpRequest })(Signup);

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './redux-js/index';
 import App from "./App";
import {applyMiddleware, createStore} from "redux";
import thunk from "redux-thunk";


const store = createStore(
    (state = {})  => state,
     applyMiddleware(thunk)
);

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

2 个答案:

答案 0 :(得分:1)

错误

  

在上下文或道具中找不到“商店”   “连接(注册)”。 将根组件包装在<Provider> 中,或者   明确地将“商店”作为道具传递给“连接(注册)”

解决方案

您需要在您的index.js文件中导入 Provider

import React from 'react';
import ReactDOM from 'react-dom';
import './redux-js/index';
import App from "./App";
import {applyMiddleware, createStore} from "redux";
import thunk from "redux-thunk";

import { Provider } from 'react-redux'; //added

const store = createStore(
    (state = {})  => state,
     applyMiddleware(thunk)
);

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

答案 1 :(得分:1)

您需要使用从App导入的Provider组件包装'react-redux'组件

import { Provider } from 'react-redux';

ReactDOM.render(
     <Provider store={store}>
         <App />
     </Provider>
         , document.getElementById('root'));
相关问题