代码之家 › 专栏 › 技术社区 › Alpit Anand

无法从actionCreator获取数据

redux-thunk redux reactjs

Alpit Anand · 技术社区 · 6 年前

最近我一直在redux工作,我试着用redux thunk异步调用。
我正在显示相关文件。
邮政.js
此文件正在componentdidmount中调用getPosts(),后者将尝试从actionCreator获取数据。

 import React,{Component} from 'react'
import Axios from 'axios'
import CardPost from '../Post/Post'
import Container from 'react-bootstrap/Container'
import Row from 'react-bootstrap/Row'
import Col from 'react-bootstrap/Col'
import classes from './Posts.module.css'
import {Link,Route} from 'react-router-dom'
import {connect} from 'react-redux'
import {getPost} from '../../Store/action/posts'
class Posts extends Component{


    componentDidMount(){
        this.props.getPosts()
    }

    render(){
        let post =<p>Loading data...</p>
       if(this.props.bulkPost.length>0){
           console.log("rendering again")
            post =  this.props.bulkPost.map((item)=>{
            return(

    <Col as={Link} to={"/posts/"+item.id} className={classes.topMargin} key={item.id} sm={4}> 
        <CardPost/>
    </Col>

            )

           })
       }
        return(
            <>
            <div>
                 <Container>
                        <Row> 
                            {post}
                        </Row>
               </Container>
            </div>

        </>
        )
    }
}

const mapStateToProps = state=>{
    return{ 
        bulkPost: state.pos.posts,
        // oneLineData: state.full.fetchedText
    }
}

const mapDispatchToProps = dispatch =>{
    return{

        // onDeleteResult: (id)=>dispatch(actionCreator.deleteResult(id)),
        getPosts:()=>dispatch(getPost())
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Posts)

这是我的行动创造者 邮政.js
它使用redux thunk中间件,并尝试获取数据异步,在console.log(res)检查时,数据正在文件中获取。

    import {POSTS} from '../action/actionType'
import Axios from 'axios'

export const savePost = (res)=>{
    return{
        posts: res,
        type:POSTS

    }
}

export const getPost = ()=>{
    return (dispatch)=>{
        Axios.get("https://jsonplaceholder.typicode.com/posts/").then((response)=>{    
        dispatch(savePost(response.data));
        })
    }
}

现在是第三个文件,理想情况下应该将数据发送到该文件,并将其返回给我们

    import * as actionType from '../action/actionType'
const intitalState = {
    posts:[]
}

const reducer = (state=intitalState, action)=>{
    switch(action.type){
        case actionType.POSTS:
                console.log(state)
                const post  = state.posts.slice(0,4);
                const updatedPost = post.map((post)=>{
                    return{
                    ...post
                    }
                })
                    return{
                        ...state,
                        posts:updatedPost
                    }
    }
    return state
}

export default reducer

在这里,状态posts不是由第一个文件中的dispatch方法填充的。有人能帮忙吗,我在这里做错了什么?
编辑: 这是一个完整的在线工作项目
https://codesandbox.io/s/4xwlwl70v0

0 回复 | 直到 6 年前

henrik123 6 年前

在actioncreator中,可以直接分派操作:

import Axios from 'axios'
import {POSTS} from '../action/actionType'

export const getPost = ()=>{
    return (dispatch)=>{
        Axios.get("https://jsonplaceholder.typicode.com/posts/").then((response)=>{    
            dispatch({
                type: POSTS,
                posts: response.data
            });
        })
    }
}

在reducer中,映射API调用的结果。我不明白映射结果的目的吗?action creator中的帖子可在action.posts上找到。

import * as actionType from '../action/actionType'
const initalState = {
    posts: []
}

const reducer = (state = initalState, action)=>{
    switch(action.type){
        case actionType.POSTS:
            const posts = action.posts.slice(0,4);
            return{
                ...state,
                posts: posts
            }
    }
    return state
}

export default reducer;

没有看到你的组合密码,这是打字错误吗?

const mapStateToProps = state=>{
    return{ 
        bulkPost: state.pos.posts, // maybe state.post.posts ?
        // oneLineData: state.full.fetchedText
    }
}