Действие Payload возвращается как неопределенное при получении данных в Redux - PullRequest
Новая
       26

Действие Payload возвращается как неопределенное при получении данных в Redux

0 голосов
/ 24 апреля 2019

Я портирую через приложение React для использования Redux. Я вижу, что действие запускается по событию click, но когда я добавляю console.log к действию в редукторе, я вижу неопределенное значение.

Я использую Redux thunk, так как извлекаю данные JSON с помощью API выборки.

действие generateQuote должно возвращать новую цитату.

Что-то, что я делаю, явно не так?

редукторы / quotes.js 


const defaultState = 
{ quote: 'Hello World',
  name: 'Me',
  email: 'foo@bar.com',
  date: Date(Date.now()),
  generatedQuotes: []

 }

const quotes = (state = defaultState, action) => {
  switch(action.type) {
    case GENERATE_QUOTE : 
      console.log(action.payload)
      return { ...state, quotes: action.payload, date: action.date } 
    case DELETE_QUOTE : 
        return {
          generatedQuotes: [...state.generatedQuotes.filter(quote => quote !== action.payload)]}
    case SHARE_QUOTE : 
          return state;
    default: 
      return state;
  }
}

export default quotes;

Действия / index.js 

export const generateQuote = () => dispatch => {
  const randomNum = (Math.floor(Math.random() * (500 - 1)) + 1);
  fetch(`https://jsonplaceholder.typicode.com/comments?id=${randomNum.toString()}`)
  .then(res => res.json())
  .then(data => {
    return 
    dispatch( {
      type: GENERATE_QUOTE, 
      payload: data[0],
      date: Date(Date.now())
    })
  })
}

Quote.js (компонент) 

/* eslint-disable react/require-default-props */
/* eslint-disable react/button-has-type */
/* eslint-disable react/jsx-filename-extension */
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

const Quote = ({quote, author, email, date, generateQuote, shareQuote}) => {

  return (
    <div className="box">
      <p>
        <strong>Quote:</strong>
        {' '}
        {quote}
      </p>
      <p>
        <strong>Author:</strong>
        {' '}
        {author}
      </p>
      <p>
        <strong>Email:</strong>
        {' '}
        {email}
      </p>
      <p>
        <strong>Date:</strong>
        {' '}
        {date}
      </p>
      <br />
      <div className="buttons">
        <button className="button is-primary is-small" onClick={generateQuote}>New Quote</button>
        <button className="button is-success is-small" onClick={shareQuote}>Tweet Quote</button>
      </div>

    </div>
  );
};

Quote.propTypes = {
  quote: PropTypes.string,
  author: PropTypes.string,
  email: PropTypes.string,
  date: PropTypes.string,
  generateQuote: PropTypes.func,
  shareQuote: PropTypes.func,
};

const mapStateToProps = state => {
  const { quote, author, email, date} = state;
};

const mapDispatchToProps = dispatch => {
  return {
    generateQuote: () => dispatch({type: 'GENERATE_QUOTE'}),
    shareQuote: () => dispatch({type: 'SHARE_QUOTE'})
  };
}

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

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

Похоже, вам нужно отправить действие цитаты в ваш компонент.Вы отправляете на свой редуктор дважды.Один раз в компоненте, а другой в файле действий.Действительно ли запускается функция в файле действий?

Примеры ниже.

https://jsonplaceholder.typicode.com/comments?id=101 отвечает массивом, 

[
   {
      postId: 21,
      id: 101,
      ....
   }
]

Cool.статический номер работает.логика в вашей выборке правильная.

Что мне интересно, так это то, что ваша фактическая выборка вызывается / запускается.В вашем компоненте вы вызываете mapStateToProps 'generateQuote's value => dispatch({type: 'GENERATE_QUOTE'}), вот так ... 

const mapDispatchToProps = dispatch => {
  return {
    generateQuote: () => dispatch({type: 'GENERATE_QUOTE'}),
    shareQuote: () => dispatch({type: 'SHARE_QUOTE'})
  };
}

Затем вы отправляете его снова в generateQuote в вашемactions/index.js

Возможно, я что-то упускаю, но вы, возможно, пропускаете все свои действия вместе. 

// ...are you sure this is firing? 
// console.log's never killed a cat. 
dispatch({
  type: GENERATE_QUOTE, 
  payload: data[0],
  date: Date(Date.now())
})

Я бы поместил ваше действие в вашу функцию mapStateToProps(), вот так ... 

import QuoteActions from '../actions"

// ... blah blah blah

const mapDispatchToProps = (dispatch) => {
  return {
    fetchProfile: (credentials) => {
      dispatch(QuoteActions.generateQuote()) // << HERE
    }
  }
}

Надеюсь, это поможет.

0 голосов
/ 24 апреля 2019

Я думаю, что оператор return отсутствует: 

export const generateQuote = () => dispatch => {
  const randomNum = (Math.floor(Math.random() * (500 - 1)) + 1);
  return fetch(`https://jsonplaceholder.typicode.com/comments?id=${randomNum.toString()}`)
  .then(res => res.json())
  .then(data => 
    dispatch({
      type: GENERATE_QUOTE, 
      payload: data[0],
      date: Date(Date.now())
  }) 
 ).catch(error => console.log(error))
}

Если ошибка не исчезла, попробуйте запрос, используя статический номер только для теста:

https://jsonplaceholder.typicode.com/comments?id=1

...