ReferenceError:ReferenceError:找不到变量:调度

时间:2019-03-20 15:57:07

标签: javascript reactjs react-native redux react-redux

我正在尝试将redux与react-native一起使用。我创建了一个提取帖子数据示例应用程序,然后我只想与mapDispatchToProps方法一起使用。我阅读了文档,然后看了一些教程,看起来很相似。

问题是当我尝试使用mapDispatchToProps时,其返回错误:

ReferenceError:ReferenceError:找不到变量:dispatch

主页屏幕中出现错误

我的主屏幕

import React from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
import { getPosts } from '../actions/index';

class HomeScreen extends React.Component {

  state = {
    data:[],
  }

  componentDidMount() {
    this.props.getPosts()
}

  render() {
    return (
      <View style={styles.container}>

      </View>
    );
  }
}


function mapStateToProps  (state)   {
  return {
    posts: state.posts
  };
};

function mapDispatchToProps (dispatch)   {
  return {
    getPosts: () => {
      dispatch(getPosts())
    }
  };
};


export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)

我的商店

import { createStore } from 'redux';
import rootReducer from '../reducers';

export default store = createStore(rootReducer);

我的动作  

import { GET_PGET_POST_LOADING,GET_POST_RECEIVED,GET_POST_ERROR } from './actionTypes';
import { GET_POST_URL } from '../api';

export const getPosts = () => {
    dispatch({
        type: GET_POST_LOADING
    });
    fetch(GET_POST_URL).then((data) => {
        console.log(data);
        dispatch({
            type:GET_POST_RECEIVED,
            payload:data
        })
    }).catch((error) => {
        console.log(error)
    })
}

我的减速器

import { GET_POST_LOADING, GET_POST_RECEIVED, GET_POST_ERROR } from '../actions/actionTypes';

const Post = (state = { posts: [] , loading: true }, action) => {
    console.log(action);
    switch(action.type) {
        case GET_POST_LOADING:
            return { 
                ...state,
                loading: true 
            }
        case GET_POST_RECEIVED:
            return {
                loading:false,
                posts: action.payload
            }
        case GET_POST_ERROR:
            return state;
    default:  return state;
    }
}

export default Post;

我的Appjs  

import React from 'react';
import { Platform, StatusBar, StyleSheet, View } from 'react-native';
import { AppLoading, Asset, Font, Icon } from 'expo';
import AppNavigator from './navigation/AppNavigator';

import { Provider } from 'react-redux';
import store from './store/index';

export default class App extends React.Component {
  state = {
    isLoadingComplete: false,
  };

  render() {
      return (
        <Provider store={store}>
         <View style={styles.container}>
          {Platform.OS === 'ios' && <StatusBar barStyle="default" />}
          <AppNavigator />
        </View>
        </Provider>

      );
  }
}

我是Redux的新手,想念哪里?

预先感谢:)

0 个答案:

没有答案