Redux和Axios获得。方法不返回任何数据

问题描述 投票:0回答:1

需要帮助。当我试图对React / REdux全局状态有一些了解时,我提出了一些简单的get请求。这是通过Axios,thunk,Redux完成的,但我无法正常工作

我有Post.js文件,没什么特别的

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import PostForm from './PostForm';

export class Post extends Component {
  static propTypes = {
    posts: PropTypes.any,
    fetchPosts: PropTypes.func,
  };

  componentDidMount() {
    const { fetchPosts } = this.props;
    fetchPosts();
  }


  render() {
    const { posts } = this.props;
    return (
      <div>
        <PostForm addPost={this.onSubmit} />
        <br />
        <div>
          {posts.map(post => (
            <div key={post.id}>
              <h3>{post.title}</h3>
              <p>{post.body}</p>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default Post;

接下来我有我的PostContainer.js

import { connect } from 'react-redux';
import Post from './Post';
import { fetchFromApi } from '../reducers/postReducers';

const mapStateToProps = state => ({
  posts: state.posts,
});

const mapDispatchToProps = dispatch => ({
  fetchPosts: () => dispatch(fetchFromApi()),
});

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

我的减速器

import Axios from 'axios';

/* action type */

const FETCH_POSTS = 'FETCH_POSTS';

/* action creator */
export const fetchStarted = payload => ({ payload, type: FETCH_POSTS });

/* thunk */
export const fetchFromApi = () => {
  return (dispatch, getState) => {
    Axios.get('https://jsonplaceholder.typicode.com/posts?_limit=5').then(res =>
      dispatch(fetchStarted(res.data))
    );
  };
};

/* reducer */
export default function reducer(state = [], action = {}) {
  switch (action.type) {
    case FETCH_POSTS: {
      return {
        ...state,
        data: action.payload,
      };
    }
    default:
      return state;
  }
}

和我的商店

import { combineReducers, applyMiddleware, createStore } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';

import postReducer from './reducers/postReducers';

const initialState = {
  posts: {
    data: {},
  },
};

const reducers = {
  posts: postReducer,
};

Object.keys(initialState).forEach(item => {
  if (typeof reducers[item] == 'undefined') {
    reducers[item] = (state = null) => state;
  }
});

const combinedReducers = combineReducers(reducers);

const store = createStore(
  combinedReducers,
  initialState,
  composeWithDevTools(applyMiddleware(thunk))
);

export default store;

所有这些都做不了什么。我的地图方法正在尝试映射空的帖子对象。由于某种原因,我的fetchPosts没有被派遣。我在这里读过一些旧文章,但仍然无法正常工作

谢谢

编辑这是我的带有容器的app.js文件

import React from 'react';

import './App.css';
import Post from './components/PostContainer';
import { Provider } from 'react-redux';
import store from './store';

function App() {
  return (
    <Provider store={store}>
      <div className='App'>
        <Post />
      </div>
    </Provider>
  );
}

export default App;
javascript reactjs redux react-redux axios
1个回答
0
投票

我设法解决了这个问题。

渲染我的posts数组时,数据不存在。如果statemante通过,则在通过简单操作之后

© www.soinside.com 2019 - 2024. All rights reserved.