Question

作为反应本机的新手，我发现很难将我的redux与反应本机连接并使之正常工作。 javascript捆绑程序完成后，我看到错误“无法读取未定义的属性类型”或“无法在上下文中或在“ connect”的属性中找到存储。要么将根组件包装在中，要么显式传递“ store”为prop。除了reducer外，我看不到任何console.log正常工作。这是我正在使用的操作

import {ADD_PLACE,DELETE_PLACE,DESELECT_PLACE,SELECT_PLACE} from './actiontypes';

export const addPLace =(placeName) =>{
  console.log('addPLace is being dispatched now');
   console.log('In addPLace reducer');
  return{
    type:ADD_PLACE,
    payload:{
      placeName:placeName
    }
  };
};

export const deletePlace =()=>{
  return{
    type:DELETE_PLACE
  };
}
export const selectedPlace =(key) =>{
  return{
    type:SELECT_PLACE,
    payload:{
      placekey:key
    }
  };
};
export const deselectPlace =()=>{
  return {
    type:DESELECT_PLACE
  };
};

这是变径管部分

import {ADD_PLACE,DELETE_PLACE,SELECT_PLACE,DESELECT_PLACE} from '../actions/actiontypes';
import PlaceImage from "../../../src/assets/download.jpeg";

const INITIAL_STATE={
  places:[],
  selectedPlace:null
}
const reducer =(action,state=INITIAL_STATE) =>{
  console.log('INside reducer');
  console.log(action);
  switch(action.type){
    case ADD_PLACE:
    return {
      ...state,
      places:state.places.concat({
        key:Math.random(),
        name:action.payload.placeName,
        image:placeImage
      })
    };
    case DELETE_PLACE:
    return{
      ...state,
      places:state.places.filter(place =>{
        return place.key !== state.selectedPlace.key;
      }),
      selectPlace:null
    };
    case SELECT_PLACE:
    return{
      ...state,
      selectedPlace:state.places.find(place=>{
        return place.key ===action.payload.placekey;
      })
    };
    case DESELECT_PLACE:
    return{
      ...state,
      selectPlace:null
    };

    default:
        return state;
  }
}
export default reducer;

这是App.js

import React, { Component } from "react";
//import { StyleSheet, Text, View, TextInput, Button } from "react-native";

import store from './src/store/reducers/index.js';
import {Provider} from 'react-redux';
//import {createStore} from 'redux';
//import {connect} from 'react-redux';
import Home from './Home.js';
export default class App extends React.Component {
  render() {
    console.log('inside App');
    console.log(store);
       return (
           <Provider store={store}>
               <Home />
           </Provider>
       );
   }

}

这是Home.js

import React, { Component } from "react";
import { StyleSheet, Text, View, TextInput, Button } from "react-native";
//import ListItem from './src/components/ListItem';
import PlaceInput from "./src/components/PlaceInput";
import PlaceList from "./src/components/PlaceList";
//import PlaceImage from "./src/assets/download.jpeg";
import PlaceDetail from "./src/components/PlaceDetail";
//import configureStore from './src/store/reducers/index.js';
//import {Provider} from 'react-redux';
//import {createStore} from 'redux';
import {connect} from 'react-redux';
import {addPLace,deletePlace,selectedPlace,deselectPlace} from './src/store/actions';

//const store=configureStore();

class Home extends React.Component {

   placeAddedHandler =val=>{
     console.log('Val is ',val);
     console.log(val);
    this.props.onAddPlace(val);
  };

  placeSelectHandler =id=>{
    console.log('id is');
    this.props.onSelectPlace(id);
  };
  placeDeleteHandler =() =>{
    console.log('inside delete handler');
  this.props.onDeletePlace();
  };
  modelClosedHandler =() =>{
    console.log('iinside close handler');
    this.props.onDeslectPlace();
  }

  render() {
    console.log('Inside render function');
    return (

      <View style={styles.container}>
      <PlaceInput onPlaceAdded={this.placeAddedHandler}/>
      <PlaceList places={this.props.places} onItemSelected={this.placeSelectHandler}/>
      <PlaceDetail
      selectedPlace={this.props.selectedPlace}
      onItemDeleted={this.placeDeleteHandler}
      onModalClosed={this.modelClosedHandler}
      />
      </View>


    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding:30,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'flex-start',
  },
});
const mapStateToProps=state => {
  console.log('Inside mapStateToProps ');
  console.log(state );
  return {
    places:state.places.places,
    selectedPlace:state.places.selectPlace
  };
}
const mapDispatchToProps = dispatch =>{
  return {
   onAddPlace:(name)=>dispatch(addPLace(name)),
   onDeletePlace:()=>dispatch(deletePlace()),
   onSelectPlace:(id)=>dispatch(selectedPlace(id)),
   onDeslectPlace:()=>dispatch(deselectPlace())
  };
}


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

此时链接到项目的github仓库 github link

Answer 1

好像您犯了一个小的导入/导出错误。

在您的reducers/index.js中，您将其导出为非默认值，并尝试将其导入为App.js.中的默认值

import store from './src/store/reducers/index.js';

应该是

import {store} from './src/store/reducers/index.js';

让我知道它是否有效。

redux未连接以正确响应本机

1 个答案: