I'm trying to make api call with fetch method from Redux, i create some action types like fetch_start, fetch_success and fetch_failed.
but i cant my reducer nothing return to me. When i check redux dev tool there is 3 action types too working. Where i mistake?
i'm using thunk, redux
here is my component:
class SignInComponent extends Component {
signIn = () => {
this.props.signIn()
}
render() {
return (
<Row className="justify-content-md-center">
<Col lg={4}>
<button type="button" onClick={this.signIn}>
</button>
</Col>
</Row>
)
}
}
const mapStateToProps = state => ({
users: state.users
})
function mapDispatchToProps(dispatch) {
return {
signIn: bindActionCreators(signIn, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SignInComponent)
here is my reducer:
import { SIGNIN_START, SIGNIN_SUCCESS, SIGNIN_FAILED } from '../../actions/Auth/SignIn'
let initialState = []
export default (state = initialState, action) => {
switch (action.type) {
case SIGNIN_START:
return console.log('start')
case SIGNIN_SUCCESS:
return console.log("success")
case SIGNIN_FAILED:
return console.log("fail")
default:
return state
}
}
here is my action:
export const SIGNIN_START = 'SIGNIN_START';
export const SIGNIN_SUCCESS = 'SIGNIN_SUCCESS';
export const SIGNIN_FAILED = 'SIGNIN_FAILED';
export const signIn = () => {
return(dispatch) => {
dispatch({
type: SIGNIN_START
})
fetch('https://api.com/signIn')
.then((response) => {
dispatch({
type: SIGNIN_SUCCESS
})
})
.catch((err) => {
dispatch({
type: SIGNIN_FAILED
})
})
}
}
you have to return the new state in the reducer for each action
return console.log();
will simply returns undefined
.
change it to
switch (action.type) {
case SIGNIN_START:
console.log('start')
return [...state];
case SIGNIN_SUCCESS:
console.log("success")
return [...state];
case SIGNIN_FAILED:
console.log("fail");
return [...state];
default:
return state
}