我应该把提供者 redux 放在哪里? [英] Where should i place the provider redux?

问题描述

我是 React 的新手，我尝试进行 JWT 身份验证，但是我发现的教程与我想要使用的新 antd 之间存在一些不兼容.如下图所示，我试图添加一个提供者，但我可能没有正确放置它你能帮我吗?这是我的登录页面:

从'react'导入React；import { Form, Icon, Input, Button, Spin } from 'antd';从'react-redux'导入{连接}；从'react-router-dom'导入{导航链接}；从'../store/actions/auth'导入*作为动作；从'react-redux'导入{提供者}const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin/>;class NormalLoginForm 扩展 React.Component {handleSubmit = (e) =>{e.preventDefault();this.props.form.validateFields((err, values) => {如果(！错误){this.props.onAuth(values.userName, values.password);this.props.history.push('/');}});}使成为() {让 errorMessage = null;如果(this.props.error){错误信息 = (<p>{this.props.error.message}</p>);}const { getFieldDecorator } = this.props.form;返回 (<div>{错误信息}{this.props.loading ?<自旋指示器={antIcon}/>:<Form onSubmit={this.handleSubmit} className="login-form"><Form.Item name='userName' rules={[{ required: true, message: '请输入您的用户名！'}]}><Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }}/>} placeholder="用户名"/></Form.Item><Form.Item name="password" rules={[{ required: true, message: '请输入您的密码！'}]}><Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }}/>} type="password" placeholder="密码"/></Form.Item><表单.项目><Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>登录</按钮>或者<导航链接style={{marginRight: '10px'}}to='/注册/'>报名</NavLink></Form.Item></表格>}

);}}函数 mapStateToProps(state) {返回 {加载:state.loading，错误:state.error}}函数 mapDispatchToProps(dispatch){返回 {onAuth:(用户名，密码)=>调度(actions.authLogin(用户名，密码))}}导出默认连接(mapStateToProps，mapDispatchToProps)(NormalLoginForm)；

当我运行它时，我有一些错误提示:

错误:在Connect(NormalLoginForm)"的上下文中找不到store".要么将根组件包装在 <Provider> 中，要么将自定义 React 上下文提供程序传递给 <Provider>和相应的 React 上下文消费者到 Connect(NormalLoginForm) 在连接选项中.

和

上述错误发生在中.成分:在 ConnectFunction(由 Context.Consumer 创建)在路由中(在 routes.js:12)在 div 中(在 routes.js:9)在 BaseRouter 中(在 App.js:15)在 div 中(在 Layout.js:23)在主要(由 Basic 创建)在 Basic(由 Context.Consumer 创建)在内容中(在 Layout.js:17)in 部分(由 Context.Consumer 创建)在 BasicLayout 中(由 Context.Consumer 创建)在布局中(在 Layout.js:8)在 CustomLayout 中(在 App.js:14)在路由器中(由 BrowserRouter 创建)在 BrowserRouter 中(在 App.js:13)在 div 中(在 App.js:12)在应用程序中(在 src/index.js:7)考虑向树添加错误边界以自​​定义错误处理行为.

还有一个警告:

警告:React.createElement:类型无效——需要字符串(对于内置组件)或类/函数(对于复合组件)但得到:未定义.您可能忘记从定义组件的文件中导出组件，或者您可能混淆了默认导入和命名导入.在 Login.js:55 检查您的代码.

解决方案

我看到您正在导入 { Provider }，但我认为它没有被使用.您想要访问状态的任何组件都需要包含在此组件中.对于您的代码示例，请尝试以下操作:

返回 (<提供者><div>{错误信息}{this.props.loading ?<自旋指示器={antIcon}/>:<Form onSubmit={this.handleSubmit} className="login-form"><Form.Item name='userName' rules={[{ required: true, message: '请输入您的用户名！'}]}><Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }}/>} placeholder="用户名"/></Form.Item><Form.Item name="password" rules={[{ required: true, message: '请输入您的密码！'}]}><Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }}/>} type="password" placeholder="密码"/></Form.Item><表单.项目><Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>登录</按钮>或者<导航链接style={{marginRight: '10px'}}to='/注册/'>报名</NavLink></Form.Item></表格>}

<提供者/>);

但是，这看起来像是您应用的单个组件.假设您想要访问 Redux 商店的组件更多，最佳做法是将整个应用程序包装在顶层的 Provider 中.

I am new to React and i try to do a JWT authentication, but there are some incompatibilities between the tutorials i found and the new antd, which i want to use. As the errors shown below, i tried to add a Provider, but i probably didn't place it correctly Can you help me, please? Here is my login page:

import React from 'react';
import { Form, Icon, Input, Button, Spin } from 'antd';
import { connect } from 'react-redux';
import { NavLink } from 'react-router-dom';
import * as actions from '../store/actions/auth';
import { Provider } from 'react-redux'

const antIcon = <Icon type="loading" style={{ fontSize: 24 }} spin />;

class NormalLoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.props.onAuth(values.userName, values.password);
        this.props.history.push('/');
      }
    });
  }

  render() {
    let errorMessage = null;
    if (this.props.error) {
        errorMessage = (
            <p>{this.props.error.message}</p>
        );
    }

    const { getFieldDecorator } = this.props.form;
    return (

        <div>
            {errorMessage}
            {
                this.props.loading ?

                <Spin indicator={antIcon} />

                :
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item name='userName' rules={[{ required: true, message: 'Please input your username!' }]}>
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                    </Form.Item>

                    <Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                    </Form.Item>

                    <Form.Item>
                    <Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
                        Login
                    </Button>
                    Or 
                    <NavLink 
                        style={{marginRight: '10px'}} 
                        to='/signup/'> signup
                    </NavLink>
                    </Form.Item>
                </Form>

            }
      </div>

    );
  }
}

function mapStateToProps(state) {
    return {
        loading: state.loading,
        error: state.error
    }
}

function mapDispatchToProps(dispatch){
    return {
        onAuth: (username, password) => dispatch(actions.authLogin(username, password)) 
    }
}

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

When i run it, i have some errors that say:

Error: Could not find "store" in the context of "Connect(NormalLoginForm)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(NormalLoginForm) in connect options.

and

he above error occurred in the <ConnectFunction> component:
    in ConnectFunction (created by Context.Consumer)
    in Route (at routes.js:12)
    in div (at routes.js:9)
    in BaseRouter (at App.js:15)
    in div (at Layout.js:23)
    in main (created by Basic)
    in Basic (created by Context.Consumer)
    in Content (at Layout.js:17)
    in section (created by Context.Consumer)
    in BasicLayout (created by Context.Consumer)
    in Layout (at Layout.js:8)
    in CustomLayout (at App.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.js:13)
    in div (at App.js:12)
    in App (at src/index.js:7)

Consider adding an error boundary to your tree to customize error handling behavior.

And also a warning:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at Login.js:55.

解决方案

I see you're importing { Provider }, but I don't think it's being used. Any components that you want to have access to state need to be wrapped in this component. For your code example, try the following:

return (
      <Provider>
        <div>
            {errorMessage}
            {
                this.props.loading ?

                <Spin indicator={antIcon} />

                :
                <Form onSubmit={this.handleSubmit} className="login-form">
                    <Form.Item name='userName' rules={[{ required: true, message: 'Please input your username!' }]}>
                        <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
                    </Form.Item>

                    <Form.Item name="password" rules={[{ required: true, message: 'Please input your Password!' }]}>
                        <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
                    </Form.Item>

                    <Form.Item>
                    <Button type="primary" htmlType="submit" style={{marginRight: '10px'}}>
                        Login
                    </Button>
                    Or 
                    <NavLink 
                        style={{marginRight: '10px'}} 
                        to='/signup/'> signup
                    </NavLink>
                    </Form.Item>
                </Form>

            }
      </div>
    <Provider />
    );

However, this looks like a single component of your app. Assuming there's more components that you want to have access to the Redux store, it's best practice to wrap the entire app in the Provider at the top level.

这篇关于我应该把提供者 redux 放在哪里?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！