reactjs - 在“连接（注册）”的上下文或道具中找不到“商店”

Question

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

下面是我的代码：

注册.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'));

标签： reactjsredux

Answer 1

错误

在“连接（注册）”的上下文或道具中找不到“商店”。要么将根组件包装在 a 中<Provider>，要么将“store”作为道具显式传递给“Connect(Signup)”

解决方案

您需要在文件中导入Providerindex.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";

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