连接到我的商店时收到错误消息！ *第一次尝试实现 Redux*

Question

正如我在标题中所说，这是我第一次尝试如此简单的 redux。我尝试了一些不同的教程，并尽我所能并将其实现到我的代码中，至少可以说很有趣。但是当我终于走到最后，使用 connect() 到达我的商店时，我收到了错误

在“Connect(SignUpEmailPage)”的上下文中找不到“store”。要么将根组件包装在 a 中，要么将自定义的 React 上下文提供者传递给连接选项中的 Connect(SignUpEmailPage)，并将相应的 React 上下文消费者传递给。

我只能假设错误来自我的 SignUpEmailPage 的底部。

下面，我已经上传了用于创建redux的文件。

我还想说我知道这是一个很重要的问题！我比你们知道的更欣赏任何洞察力！ Redux 对于这样的新手来说相当复杂！:)

types.js -> ADD_LIKED/ADD_DISLIKED 只是我脑海中的想法，供以后使用

export const ADD_EMAIL = 'ADD_EMAIL';
export const ADD_LIKED = 'ADD_LIKED';
export const ADD_DISLIKED = 'ADD_DISLIKED';

appReducer.js -> 与问题无关，但我认为我需要为 ADD_LIKED/ADD_DISLIKED 使用不同的减速器。电子邮件和这两者不相关，并且状态不同。那么它们应该在不同的减速器中正确吗？老实说，仍然对那些感到困惑。我把这个留到另一个问题大声笑

import { ADD_EMAIL, ADD_LIKED } from '../actions/types.js';

const initialState = {
    email: null,

    //this is all in theory
    dislilkeList: [],
    likedList: []
}

const appReducer = (state = initialState, action) => {
    switch(action.type){
        case ADD_EMAIL:
            return {...state,
            email: state.email({
             name: action   
            })
        }
        case ADD_LIKED:
            return {...state,
            swipedLeft: state.likedList.concat({//test with push rather than concat
               key: Math.random(),
               name: action     
                })
            }   
        case ADD_DISLIKED:
            return {...state,
            swipedLeft: state.dislikedList.concat({//test with push rather than concat
                key: Math.random(),
                name: action     
                })
            }      
        default:
            return state;


    }
}

export default appReducer;

store.js

import { createStore, combineReducers} from 'redux';
import appReducer from '../reducers/appReducer';

const rootReducer = combineReducers({
    email: appReducer
})

const configureStore = () => createStore(rootReducer)

export default configureStore;

index.js

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';

import configureStore from './components/store';

const store = configureStore();

const providerComponent = () =>
<Provider store={store}>
    <App/>
</Provider>

AppRegistry.registerComponent(appName, () => providerComponent);

最后，

我有两个页面，我在其中创建状态并将其发送到另一个页面。我正在尝试输入电子邮件并将其发送到我的密码页面以进行显示。我知道它对于 redux 来说是一项简单的任务，但我计划在未来将 redux 用于其他事情。

SignUpEmail.js我只包括我认为你们需要的代码

import { connect } from 'react-redux';

class SignUpEmailPage extends Component {

state = {
  email: null
}

render()
 <Container style = {styles.emailInput}>
        
        <Form>
          <Item floatingLabel >
            <Label style={{color:this.state.color1}}>Email Address</Label>
                <Input
                value = {this.state.email}
                onChange={(email) => this.setState({ email })}                
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                onFocus={() => this.setState({color1: '#F7018D'})}               
                onBlur={() => this.setState({color1: '#A2A2A2'})}
                />
          </Item>
        </Form>
      </Container>

     <View style={styles.containerBottom}>   
      <ContinueButton
        onPress={() => this.props.navigation.navigate('CreatePassword')} 
      /> 
      </View>

const mapStateToProps = (state) => {
  return {
    email: state.email.CreatePasswordPage
  }
}

export default connect(mapStateToProps) (SignUpEmailPage);

CreatePassword.js -> 我还没有尝试打印状态，还没有到那一步，很高兴知道如何:)

import {connect } from 'react-redux';

class CreatePasswordPage extends Component {

render()
<Container style = {styles.passwordInput}>
        
        <Form>
          <Item floatingLabel>
           <Label style={{color:this.state.color1}}>Password</Label>
              <Input
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                secureTextEntry={true}
                onFocus={() => this.setState({color1: '#F7018D'})}
                
                onBlur={() => this.setState({color1: '#A2A2A2'})}
         
              />
         </Item>
       </Form>
      </Container>

//deals with connecting to store
//maps states
const mapStateToProps = (state) => {
  return {
    email: state.email.CreatePasswordPage
  }
}
//maps actions, for future purposes
const mapDispatchToProps = (state) => {

}

export default connect(mapStateToProps) (CreatePasswordPage);

Answer 1

如果删除此行中的空格，请查看是否出现错误：

export default connect(mapStateToProps) (SignUpEmailPage)

到

export default connect(mapStateToProps)(SignUpEmailPage)

Answer 2

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

检查你有 document.getElementByID('root')

Answer 3

尝试将您的 store.js 文件更改为此

import { createStore, combineReducers} from 'redux';
import appReducer from '../reducers/appReducer';

const rootReducer = combineReducers({
    email: appReducer
})

const initialState = {}

const store = createStore(rootReducer, initialState)

export default store;

和你的 index.js 文件到这个：

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';

import store from './components/store';

const providerComponent = () =>
<Provider store={store}>
    <App/>
</Provider>

AppRegistry.registerComponent(appName, () => providerComponent);