React native w/ redux: dispatch不是函数

I am trying to implement the following example in my project: https://github.com/reactjs/redux/tree/master/examples/async

我正在尝试在我的项目中实现以下示例:https://github.com/反应物/redux/tree/master/examples/async

But I keep running into the error: dispatch is not function when executing the dispatch function from my actions class.

但是我一直在运行这个错误:在执行action类的dispatch函数时，dispatch不是函数。

It seems as if Dispatcher is not getting passed down to my actions but I followed the flow in the example:

似乎Dispatcher并没有传递给我的操作，但是我遵循了示例中的流程:

actions/index.js file:

行动/索引。js文件:

    export const REQUEST_LOCAL_POSTS = 'REQUEST_LOCAL_POSTS';
export const RECEIVE_LOCAL_POSTS = 'RECEIVE_LOCAL_POSTS';
export const REQUEST_CURRENT_LOCATION = 'REQUEST_CURRENT_LOCATION';
export const RECEIVE_CURRENT_LOCATION = 'RECEIVE_CURRENT_LOCATION';


export const requestCurrentLocation = () => ({
    type: REQUEST_CURRENT_LOCATION
})

export const receiveCurrentLocation = currentLocation => ({
    type: RECEIVE_CURRENT_LOCATION,
    currentLocation,
    receivedCurrentLocationAt: Date.now()
})

export const requestLocalPosts = () => ({
    type: REQUEST_LOCAL_POSTS
})

export const receiveLocalPosts = json => ({
    type: RECEIVE_LOCAL_POSTS,
    posts: json,
    receivedAt: Date.now() 
})

export const fetchLocalPosts = dispatch => {
    dispatch(requestCurrentLocation())
    navigator.geolocation.getCurrentPosition(
      (position) => {
         dispatch(requestLocalPosts()) // getting dispatch is not a function here
        return fetch(`http://192.168.1.3:9000/posts?lng=${position.coords.longitude}&lat=${position.coords.latitude}&radius=1000`)
    .then(response => response.json())
    .then(json => dispatch(receiveLocalPosts(json)))

      },
      (error) => this.setState({ error: error.message }),
      { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
    )

home.js (component):

家js(组件):

import React, { Component } from 'react';
import {Text, View, ActivityIndicator, FlatList, Image, TouchableHighlight} from 'react-native';
import styles from './styles';
import MapView from 'react-native-maps';
import images from '../../config/images';
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { fetchLocalPosts } from '../../actions'


 class Home extends Component {

    static navigationOptions = ({ navigation }) => {
//const {dispatch , state, setParams} = navigation;

  return {
    title:<Text style={styles.title}>Localized</Text>,
    headerStyle: {backgroundColor: '#2c6da4'},
    headerRight: (
      <TouchableHighlight onPress={() => navigation.dispatch({ type: 'MAP_EXPLORE' })}>
  <Image
        source={images.icons.map}
      />
    </TouchableHighlight>

    ),
  };
};

static propTypes = {
    posts: PropTypes.array.isRequired,
    isFetching: PropTypes.bool.isRequired,
    lastUpdated: PropTypes.number,
    dispatch: PropTypes.func.isRequired
  }




    componentDidMount() {
        console.log(this.props)
        const { dispatch } = this.props
        dispatch(fetchLocalPosts()) // calling action from here
    }



    render() {


        return (

            <View style={styles.container}>

                 // i know posts isnt accessed here yet, still trying 
                 to get past error
                <FlatList
                    data={this.state.data}
                    refreshing={this.state.refreshing}
                    showsVerticalScrollIndicator={false}
                    ListHeaderComponent={this.renderHeader}
                    onRefresh={this._onRefresh.bind(this)}

                    renderItem={({item}) => <View><FlatList
                        data={item.posts}
                        horizontal={true}
                        snapToAlignment='center'
                        showsHorizontalScrollIndicator={false}
                        renderItem={({item}) => <Text style={styles.item}>{item.title}{"\n"}{item.snippet}</Text>}/>
                        <Text style={styles.subItem}>{item.Name}{"\n"}{item.Address}</Text>
                    </View>}

                />

            </View>

        );
    }


}

const mapStateToProps = state => {
  const { postsByBusiness } = state
  const {
    isFetching,
    lastUpdated,
    items: posts
  } = postsByBusiness || {
    isFetching: true,
    items: []
  }

  return {
    posts,
    isFetching,
    lastUpdated
  }
}

export default connect(mapStateToProps)(Home)

reducer/index.js:

减速机/ index.js:

import { combineReducers } from 'redux';
import { NavigationActions } from 'react-navigation';

import { AppNavigator } from '../navigators/AppNavigator';

import { RECEIVE_LOCAL_POSTS, REQUEST_LOCAL_POSTS } from '../actions';


const initialNavState=AppNavigator.router.getStateForAction(NavigationActions.reset({
    index: 0,
    actions: [
      NavigationActions.navigate({
        routeName: 'Home',
      }),
    ],
}));



const MAP_EXPLORE = 'MAP_EXPLORE';
const LIST_EXPLORE = 'LIST_EXPLORE';


function nav(state = initialNavState, action) {
    let nextState;
    switch(action.type) {
        case MAP_EXPLORE:
        nextState = AppNavigator.router.getStateForAction(
            NavigationActions.navigate({ routeName: 'Map'}),
            state
            );
        break;
        case LIST_EXPLORE:
        nextState = AppNavigator.router.getStateForAction(
            NavigationActions.navigate({ routeName: 'List'}),
            state
            );
        break;
        default:
            nextState = AppNavigator.router.getStateForAction(action, state);
            break;
    }
    return nextState || state;

}


function postsByBusiness(state = { }, action) {
    switch(action.type) {
        case RECEIVE_LOCAL_POSTS:
        return {
            ...state,
            isFetching: false,
        didInvalidate: false,
        items: action.posts,
        lastUpdated: action.receivedAts
        }
        default:
        return state
    }
}




const AppReducer = combineReducers({
  nav,
  postsByBusiness

});

export default AppReducer;

1 个解决方案

#1

fetchLocalPosts should be returning a function that takes dispatch as an argument. Changing it to the following should fix it.

fetchLocalPosts应该返回一个以dispatch为参数的函数。将它更改为以下应该会修复它。

export const fetchLocalPosts = () => dispatch => {
  ...

It's another way of doing this:

这是另一种方法:

export const fetchLocalPosts = () => {
    return function (dispatch) {
      ...