Я портирую через приложение 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);