mapStateToProps не возвращает данных, данные не определены - PullRequest
Новая
       6

mapStateToProps не возвращает данных, данные не определены

0 голосов
/ 10 октября 2019

Моя проблема в том, что mapStateToProps возвращает неопределенное значение. Может быть, у меня есть некоторые проблемы с диспетчеризацией в состоянии или, возможно, рендеринг приложения, прежде чем данные поступают с сервера? Я не могу понятьТак что приложение работает без редукции только с помощью componentDidMount, но у меня есть некоторые проблемы с редукцией. Итак, у меня есть приложение верхнего уровня: 

const App = () => {
  return (
    <Provider store={store}>
      <Screen />
    </Provider>
  )
}

У меня есть хранилище с thunk meddleware: 

const store = createStore(reducer, applyMiddleware(ReduxThunk));

Два типа действий: 

export const fetchData = (newPhotos) => async (dispatch) => {
  function onSuccess(success) {
    dispatch({
      type: FETCH_DATA,
      payload: success})
      return success
  }
  function onError(error) {
    dispatch({type: FETCH_FAILED, error})
  }

  try {
    const URL = 'https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0';
    const res = await fetch(URL);
    const success = await res.json();
    console.log(success);
    return onSuccess(success);
  } catch (error) {
    return onError(error)
  }

};

Редуктор: 

const initialState = {
  data: []
}

export default dataReducer = (state = initialState, action) => {
  console.log(action);
  switch (action.type) {
    case FETCH_DATA:
      return {
        data: action.payload
      }

    case FETCH_FAILED:
      return {
        state
      }
    default: return state;
  }   
}

Комбинированные редукторы: 

export default combineReducers({
  fetchedData: dataReducer
});

и мой компонент рендеринга: 

class HomeScreen extends Component {
  render() {
    console.log(this.props)
    const {navigation, data} = this.props;
    return (
      <ScrollView>
        <Header />
        <ImageList navigation={navigation} data={data}/>
      </ScrollView>
    )
  }
}

const mapStateToProps = state => {
  return {
    data: state.fetchedData.data
  }
}

export default connect(mapStateToProps, {fetchData})(HomeScreen);

1 Ответ

0 голосов
/ 10 октября 2019

fetchData действие не будет вызвано само по себе. Вы должны назвать это явно (в componentDidMount и, вероятно, componentDidUpdate) как 

class HomeScreen extends Component {
  componentDidMount() {
    this.props.fetchData(/* I don't know where you are going to take newPhotos argument */);
  }

  render() {
     //...
  }
}
...