Question

我正在尝试处理根文件中的Redux

import React from 'react';
import {Provider,connect} from 'react-redux';
import {createStore,bindActionCreators} from 'redux';
import {AsyncStorage} from 'react-native';
import {View} from "@shoutem/ui/components/View";
import { Spinner } from '@shoutem/ui';
import { Login } from './Actions/user';
import { createProfile } from './Actions/profile';
import Nav from './Screens/Nav';
import reducers from './Reducers';

export class App extends React.Component {
    state = {
        loading: true
    };

    constructor(props) {
        super(props);
        console.log(props);
        console.disableYellowBox = true;
    }

    async iniRoute()
    {
      return await AsyncStorage.getItem('@Profile:user');
    }

    componentWillMount()
    {
        this.iniRoute().then(data => {
            if (data)
            {
                this.props.Login(data.username,data.email);
                this.props.createProfile(data.name , data.username , data.email , data.birthday , data.password , data.location);
                this.setState({loading:false});
            }
            else
            {
                this.setState({loading:false});
            }
        });
    }

    render() {
        return (
            <Provider store = {createStore(reducers)}>
                <View>
                    {!this.state.loading && <Nav />}
                    {this.state.loading && <Spinner />}
                </View>
            </Provider>
        );
    }
}

const mapDispatchToProps = dispatch => (
    bindActionCreators({
      Login,
      createProfile,
    }, dispatch)
  );

 export default connect(mapDispatchToProps)(App);

它引发以下错误

在connect（app）的上下文中找不到不变的违规行为

我可能会写一些错误的代码，因为我对Redux的经验不是很好，

在这种情况下-谁能告诉我如何在不遇到这些错误的情况下实现这一目标。

Answer 1

App.js应该是与Provider一起包装的。 Provider是为您的应用程序提供商店实例的提供商，然后connect才能获取商店。因此，实质上，您是在尝试创建商店之前尝试阅读该商店。因此，假设您有一个index.js呈现App.js，则应将其更改为

//Your code here
//wrappers on App
<App/>
//wrappers on App
//Your code here

到

//Your code here
<Provider>
   //wrappers on App
   <App/>
   //wrappers on App
</Provider>
//Your code here

您可以通过在Google上搜索提供者来找到基本教程。这是链接https://redux.js.org/basics/usage-with-react

在connect（app）的上下文中找不到不变的冲突

1 个答案: