middlware is not a function in react native - 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'