Question

我是React和Redux的新手，我试图从WordPress REST API加载帖子，并在我的React App中显示它们。

我以此为例：https://github.com/jackreichert/a-wp-react-redux-theme

我发布帖子的动作如下：

import axios from 'axios';
export const FETCH_POSTS = 'FETCH_POSTS';

export function fetchPosts(post_type = 'posts') {
    return function (dispatch) {
        axios.get(`http://localhost:8080/wp-json/wp/v2/${post_type}`)
            .then(response => {
                dispatch({
                    type: FETCH_POSTS,
                    payload: response.data
                });
            });
    }
}

它传递给reducer，如下所示：

import { FETCH_POSTS } from '../actions';

export default (state = [], action) => {
    switch (action.type) {
        case FETCH_POSTS:
            return action.payload;
        default :
            state = '';
        break;
    }
    return state;
}

并且（尽管它只有一个减速器）我将它组合起来，因为还有更多的减速器（就像在例子中一样），然后我将它存储起来。也与示例几乎相同。

我正在加载Home.jsx文件中的所有内容，现在看起来像这样：

import React, { Component } from 'react';
import {connect} from 'react-redux';
import { Link } from 'react-router-dom';

import Header from '../Header';
import {fetchPosts} from '../../actions/';

class Home extends Component{
    componentDidMount(){
        document.title = 'Test';
    }

    componentWillMount() {
        this.getPosts(this.props, true);
    }

    componentWillReceiveProps(nextProps) {
        this.getPosts(nextProps);
    }

    getPosts(props, willMount = false) {
        if (willMount) {
            this.props.fetchPosts();
        }
    }
    render() {
        return(
            <div>
                <Header/>
                <main>
                  <h1>Home</h1>
                </main>
            </div>
        )
    }
}

function mapStateToProps({posts}) {
    return {posts};
}

export default connect(mapStateToProps, {fetchPosts})(Home);

我认为上面的代码是正确的。 Redux也可以找到＆＃39;我的帖子，并在我的控制台中登录：

action FETCH_POSTS @ 11:11:56.393
    prev state Object {posts: ""}
    action     Object {type: "FETCH_POSTS", payload: Array(2)}
    next state Object {posts: Array(2)}

现在我想知道：如何在Home.jsx文件中简单地显示由Redux加载的帖子。之后：我如何配置路线和数据，转到单个帖子（但稍后会出现，现在我只想知道一种简单但正确的方式来显示帖子）

Answer 1

我不知道你的Post对象的结构。但它应该是这样的。

CREATE TABLE [dbo].[t1_new](
    [Id] [int] NULL,
    [transferdate] [date] NULL,
    [payment] [int] NULL
) ON [PRIMARY]

GO
INSERT [dbo].[t1_new] ([Id], [transferdate], [payment]) VALUES (1, CAST(N'2017-05-18' AS Date), 1000)
GO
INSERT [dbo].[t1_new] ([Id], [transferdate], [payment]) VALUES (2, CAST(N'2017-05-19' AS Date), 1100)
GO
INSERT [dbo].[t1_new] ([Id], [transferdate], [payment]) VALUES (3, CAST(N'2017-05-20' AS Date), 1200)
GO
INSERT [dbo].[t1_new] ([Id], [transferdate], [payment]) VALUES (4, CAST(N'2017-05-21' AS Date), 1400)
GO


select top 1 t1.*,
LAG(transferdate) OVER (ORDER BY transferdate) previous_date,
LAG(payment) OVER (ORDER BY payment) previou_payment,
t1.payment - (LAG(payment) OVER (ORDER BY payment)) as payment_difference
from t1_new t1
order by Id desc

然后在你的渲染方法中，只需像这样调用它。

renderPosts() {
  return _.map(this.props.posts, post => {
    return (
      <li className="list-group-item" key={post.id}>
          {post.title}
      </li>
    );
  });
}

另请注意，我在此处使用render() { return ( <div> <h3>Posts</h3> <ul className="list-group"> {this.renderPosts()} </ul> </div> ); }库中的map帮助器。因此，您需要在组件中使用以下import语句。

lodash

希望这会有所帮助。快乐的编码！

Answer 2

如果你正确地实现了combineReducers，那么当mapStateToPosts被更改时，应该使用一组帖子来调用它们。

import posts from './posts_reducer';

combineReducers({ posts });

要在Home组件中呈现帖子，您需要修改渲染功能，请参阅下面的原始实现：

render() {
    let postsElements = this.props.posts.map(p => {
        return <div>p.title</div>
    });
    return(
        <div>
            <Header/>
            <main>
              <h1>Home</h1>
            </main>
            <div>
                {postsElements}
            </div>
        </div>
    )
}

您需要使用this.props.posts来访问您的帖子，因为 react-redux 使用mapStateToProps函数将属性从状态映射到组件的props对象，该函数在调用{时作为第一个参数提供{1}}功能。

为了改进这一点，您可以实现Blog组件并将connect替换为该组件。

另外，请查看您在此文件中提供的示例https://github.com/jackreichert/a-wp-react-redux-theme/blob/master/src/components/main.js中的实现方式。

Answer 3

    url(r'^users/me/$', CurrentUser.as_view()),

如何使用React和Redux显示加载的帖子

3 个答案: