Redux | How do I properly connect to the redux store - react-native

Question

I got my redux store to work but only if I import the store in the action creator file and call store.dispatch() from the action creator. Apparently calling store.dispatch() isn't a good practice and if I connect the function properly to the store, then I can just call dispatch() instead of store.dispatch(). That said, when I tried to just use dispatch(), I got the error: "Can't find variable: dispatch".
My best guess is that my issue is that I'm not using Redux's connect() function properly at the bottom of this code:
import React, {useState} from 'react'
import { connect } from 'react-redux'
import { StyleSheet, View, Text, TextInput, Image, TouchableOpacity } from 'react-native';
import { signup } from '../../actions/authAction'
const ApprovedScreen = () => {
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
return (
<View>
<TextInput
style={styles.textInput}
value={email}
onChangeText={text=>setEmail(text)}
/>
<TextInput
value={password}
onChangeText={text=>setPassword(text)}
/>
<TouchableOpacity onPress={()=>signup({email, password})}>
<Text>Create An Account</Text>
</TouchableOpacity>
</View>
)
}
export default connect(null, { signup })(ApprovedScreen)
And here's the { signup } function code:
import axios from 'axios'
import { LOG_IN } from './types'
export function signup ({email, password}) {
console.log('singup function ran')
axios
.post('https://MYAPI.com/signup', {email, password})
.then(response => dispatch({
type: LOG_IN,
payload: response.data.token
}))
.catch(error => {
console.log(error)
})
}

Answer 1

Since you're using redux-thunk, the action needs to return another function, which takes dispatch as an argument:
export function signup({ email, password}) {
return function(dispatch) {
return axios
.post('https://MYAPI.com/signup', {
email,
password
})
.then(response => dispatch({
type: LOG_IN,
payload: response.data.token
}))
.catch(error => {
console.log(error)
})
}
}
Also you need to pass signup function as the prop to your component:
const ApprovedScreen = ({signup}) => {