Redux как отправить несколько типов действий с помощью метода fetch - PullRequest
Новая
       6

Redux как отправить несколько типов действий с помощью метода fetch

0 голосов
/ 13 февраля 2019

Я пытаюсь сделать вызов API с помощью метода fetch из Redux, я создаю несколько типов действий, таких как fetch_start, fetch_success и fetch_failed.

но я не могу вернуть мой редуктор.Когда я проверяю инструмент Redux Dev, там тоже работают 3 типа действий.Где я ошибаюсь?

я использую thunk, redux

вот мой компонент: 

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)

вот мой редуктор: 

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
    }
}

вот мойдействие: 

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
        })
        })
    }
}

1 Ответ

0 голосов
/ 13 февраля 2019

вы должны возвращать новое состояние в редуктор для каждого действия 

return console.log();

просто возвращает undefined.

изменить его на 

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
 }
...