Reactjs 向还原程序分派操作时无法更新状态
我在我的主页组件上,我需要显示文章提要,为此,我必须有文章列表数组。但由于某种原因,当我查看商店时,articleList为空。此外,我在获取数据后放置的console.log也不工作。这一切似乎都很奇怪Reactjs 向还原程序分派操作时无法更新状态,reactjs,redux,redux-thunk,Reactjs,Redux,Redux Thunk,我在我的主页组件上,我需要显示文章提要,为此,我必须有文章列表数组。但由于某种原因,当我查看商店时,articleList为空。此外,我在获取数据后放置的console.log也不工作。这一切似乎都很奇怪 Home.js import React, { Component } from "react" import { connect } from "react-redux" import { listAllArticles } from "../actions/articles" cla
Home.js
import React, { Component } from "react"
import { connect } from "react-redux"
import { listAllArticles } from "../actions/articles"
class Home extends Component {
componentDidMount() {
this.props.dispatch(listAllArticles)
}
render() {
console.log(this.props)
return (
<div style={{ textAlign: "center" }}>
<h1>Conduit</h1>
<h5>A place to share your knowledge</h5>
</div>
)
}
}
const mapStateToProps = (state) => {
return state
}
export default connect(mapStateToProps)(Home)
你需要调用动作
this.props.dispatch(listalarticles())
@elvis\u ferns该死,我这两个小时都在挠头。你救了我一天。谢谢
listAllArticles
export const listAllArticles = () => {
console.log("inside listAllArticles action creator")
return dispatch => {
fetch("https://conduit.productionready.io/api/articles")
.then(res => res.json())
.then(data => {
console.log(data.articles)
dispatch({
type: "LIST_ALL_ARTICLES",
data: data.articles
})
})
}
}
articleReducer
const initState = {
articleList: null
}
export const articleReducer = (state=initState, action) => {
console.log("inside article reducer")
switch(action.type) {
case "LIST_ALL_ARTICLES":
return {...state, articleList: action.data}
default:
return state
}
}