middlware is not a function in react native

Question

I am learning React-native and trying to implement redux. I have used React-redux & React-thunk perform a Async task from the Action. During the implementation, getting an error e.i. "middleware in not a function" when I run. If I comment out middleware and relevant code then everything works fine.

Here is my code below.

index.js

import React, {Component} from 'react';
import ResetUserContainer from "./src/Components/resetUserContainer"
import {Provider} from 'react-redux'
import {createStore,applyMiddleware} from 'redux'
import {thunk} from 'redux-thunk'

import userResetReducer from "./src/Reducers/ResetReducer"

const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);

const store = createStoreWithMiddleware(userResetReducer);


export default class App extends Component {
  render() {
    return (
    <Provider store = {store}>
    <ResetUserContainer/>
    </Provider>
    );
  }
}

ResetUserContainer.js class.

import React, { Component } from "react";
import { StyleSheet, View, ActivityIndicator } from "react-native";
import { connect } from "react-redux"
import userAction from "./Actions/UserAction"
import PropTypes from "prop-types";

class ResetUserContainer extends Components {
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        this.props.requestToken();
    }

    render() {

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

                            onPress={this._onPressButton}
                            containerStyle={{ marginTop: 20 }}
                        />
                    </View>
                </View>

                <ActivityIndicator
                    size="large"
                    color="red"
                    style={this.props.isFetching ? styles.centering : styles.hideLoader} />
            </View>
        );
    }

    _onPressButton = () => {
      //  this.props.requestToken();
    }
}

ResetUserContainer.propTypes = {
    requestToken: PropTypes.func.isRequired,
    objectMember: PropTypes.object.isRequired
}


const mapStateToProps = state => {
    return {
        //Here using objectMember, we can access any member of action class
        objectMember: state,


//we can use also like this
        isFetching: state.isFetching,
        errorMsg: state.errorMsg,
        displayMsg: state.displayMsg,
        token: state.token
    }

}
export default connect(mapStateToProps, { userAction })(ResetUserContainer);

types.js

  export const TOKEN_REQUEST_PROCESSED = 'TOKEN_REQUEST_PROCESSED';
  export const TOKEN_REQUEST_TOKEN_SUCCEEDED= 'TOKEN_REQUEST_TOKEN_SUCCEEDED';
  export const TOKEN_REQUEST_FAILED = 'TOKEN_REQUEST_FAILED';

UserAction.js

import AuthInterface from '../../Interfaces/authInterface';
import UserResetModel from '../../Models/userResetModel';
import SpecialUserModel from '../../Models/specialUserModel';

import { TOKEN_REQUEST_PROCESSED, TOKEN_REQUEST_TOKEN_SUCCEEDED, TOKEN_REQUEST_FAILED } from './types';

export const tokenRequestProcess = () => ({ type: TOKEN_REQUEST_PROCESSED });
export const tokenRequestSuccess = (token) => ({ type: TOKEN_REQUEST_TOKEN_SUCCEEDED, payload: token });
export const tokenRequestFailed = (error) => ({ type: TOKEN_REQUEST_FAILED, payload: error });

    export const requestToken = () => {
        return async dispatch => {
            dispatch(tokenRequestProcess);
            let specialuser = new SpecialUserModel("", "");
            specialuser.Username = "xyz.com";
            specialuser.Password = "xyz.password";

            AuthInterface.authenticateSpecialUser(specialuser).then((response) => {
                let result = new httpResponseModel();
                result = response;
                if (result.ErrorCode == "OK") {
                    dispatch(tokenRequestSuccess(result.token_number))
                } else {
                    //Handel all possible failure by error msg
                    dispatch(tokenRequestFailed(result.error_msg));
                }
            }, (err) => {

                dispatch(tokenRequestFailed(JSON.stringify(err)));
            });
        }
    };

ResetReducer.js

import {
    TOKEN_REQUEST_PROCESSED, TOKEN_REQUEST_TOKEN_SUCCEEDED, TOKEN_REQUEST_FAILED
} from './types';

const initialState = {
    isFetching: false,
    errorMsg: '',
    displayMsg: '',
    token: ''
};

const resetReducer = (state = initialState, action) => {
    switch (action.type) {
        case TOKEN_REQUEST_PROCESSED:
            return { ...state, isFetching: true };

        case TOKEN_REQUEST_TOKEN_SUCCEEDED:
            return { ...state, isFetching: false, displayMsg: action.payload }

        case TOKEN_REQUEST_FAILED:
            return { ...state, isFetching: false, errorMsg: action.payload }

        default:
            return state;
    }
}


export default resetReducer;

package.json

"dependencies": {
    "react": "16.5.0",
    "react-native": "^0.57.2",
    "react-redux": "^5.0.7",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.48.0",
    "react-test-renderer": "16.5.0"
  },

Please let me know if I am doing something wrong or missing something. I have googled but couldn't solve, like here in, Redux thunk in react native

Thanks in advance.

Answer 1

import {thunk} from 'redux-thunk'

Please check this line. You should change that into below.

import thunk from 'redux-thunk'