Редукс Сага не смещает действия, на редукторы реагируют нативные - PullRequest
Новая
       54

Редукс Сага не смещает действия, на редукторы реагируют нативные

1 голос
/ 03 июля 2019

я учусь

перевождь-сага.

Я следовал этому учебнику

Проблема:

mapStateToProps не отображает состояние на реквизит. URL изображения собаки не отображает

Мои усилия

Home.js 

class Home extends Component {


  render() {
    return (
      <View style={{justifyContent: 'center',
      alignItems: 'center',flex: 1}}>
        <Text>Welcome to Dog Saga</Text>

        <Image source={{ uri: this.props.dog }} style={{width: 50,height: 50}}/>

        {this.props.dog!==null && this.props.dog!== undefined ? (
          <Text>Keep clicking for new dogs</Text>
        ) : (
          <Text>Replace the React icon with a dog!</Text>
        )}

        {this.props.fetching ? (
          <Button title={'Fetching...'} disabled></Button>
        ) : (
          <Button title={'Request a Dog'} onPress={this.props.onRequestDog}></Button>
        )}

        {this.props.error && (
          <Text style={{ color: "red" }}>Uh oh - something went wrong!</Text>
        )}
      </View>
    );
  }
}

const mapStateToProps = state => {
  return {
    fetching: state.fetching,
    dog: state.dog,
    error: state.error
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onRequestDog: () => dispatch({ type: API_CALL_REQUEST })
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Home);

apiSaga.js 

import { takeLatest, call, put } from "redux-saga/effects";
import axios from "axios";
import {
  API_CALL_REQUEST,
  API_CALL_SUCCESS,
  API_CALL_FAILURE
} from '../actions/actionTypes';

//watcher saga, watches for actions dispatached to the store , starts worker saga
export function* watcherSaga() {
  yield takeLatest(API_CALL_REQUEST, workerSaga);
}

// function that makes the api request and returns a Promise for response
function fetchDog() {
  return axios({
    method: "get",
    url: "https://dog.ceo/api/breeds/image/random"
  });
}

// worker saga: makes the api call when watcher saga sees the action
function* workerSaga() {
  try {
    const response = yield call(fetchDog);
    const dog = response.data.message;

    // dispatch a success action to the store with the new dog
    yield put({ type: API_CALL_SUCCESS, dog });
  } catch (error) {
    // dispatch a failure action to the store with the error
    yield put({ type: API_CALL_FAILURE, error });
  }
}

store.js 

import { createStore, applyMiddleware, compose } from "redux";
import createSagaMiddleware from "redux-saga";
import { rootReducer } from "../reducers";
import { watcherSaga } from "../sagas/apiSaga";

// create the saga middleware
const sagaMiddleware = createSagaMiddleware();

// dev tools middleware
const reduxDevTools =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

// create a redux store with our reducer above and middlewaree
export const store = createStore(
  rootReducer,
  compose(applyMiddleware(sagaMiddleware))
);

// run the saga
sagaMiddleware.run(watcherSaga);

apiReducer.js 

import {
  API_CALL_REQUEST,
  API_CALL_SUCCESS,
  API_CALL_FAILURE
} from "../actions/actionTypes";

const initialState = {
  fetching: false,
  dog: null,
  error: null
};

const apiReducer = (state = initialState, action) => {
  switch (action.type) {
    case API_CALL_REQUEST:
      return { ...state, fetching: true, error: null };
    case API_CALL_SUCCESS:
      return { ...state, fetching: false, dog: action.dog };
    case API_CALL_FAILURE:
      return { ...state, fetching: false, error: action.error, dog: null };
    default:
      return state;
  }
};

export default apiReducer;

выход

enter image description here

новичок в редуксе саги

спасибо

...