Javascript Redux和Axios得到了。方法不返回任何数据

我需要一些帮助。 当我试图了解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;

我的减速机

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;

所有这些都没有多大作用。我的映射方法正在尝试映射空的posts对象。由于某种原因，我的回帖没有被发送。我在这里读了一些旧帖子，但仍然不能让它工作

谢谢

编辑 这是我的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;

从“React”导入React；
导入“/App.css”；
从“/components/PostContainer”导入邮件；
从'react redux'导入{Provider}；
从“./store”导入存储；
函数App（）{
返回(
);
}
导出默认应用程序；

我设法让它工作起来

---

在呈现我的posts数组时，数据不存在。在传递simple if statemente all is working

后，posts reducer的初始状态是一个数组

state=[]

，这很有意义，但随后您将其更新为具有

data

属性的对象<代码>{…状态，数据：action.payload}。好的。那么你有什么建议呢？

返回操作。有效载荷

？将状态保留为数组。这不起作用：/。这是我多次失败的尝试之一，

无法读取未定义的属性“map”

您在哪里渲染

Post

组件？您是否正确地使用了

后容器

？

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;