Question

我是React-Redux的新手，我上周选择了它并获得了一个创建一个简单应用程序的任务，您可以在其中创建，更新，销毁和查看帖子。

我非常沮丧，因为我无法弄清楚为什么我无法有效地将道具传递到我的节目页面。

我在索引页面的每个帖子上都有一个链接，点击后，它会带你到帖子的详细页面。

当我转到显示页面时，当前帖子在状态中，但它永远不会呈现。

我知道这是真的，因为我正在使用记录器中间件，并且状态中只有一个帖子，这是我要渲染的帖子。

在我的地图状态到道具，post，它应该指向当前帖子，是未定义的，我在尝试访问它时遇到错误。我假设我的问题在那里（在我的mapStateToProps中）。

我对这种材料感到满意。在创建存储/缩减器时是否需要遵循任何标准指南，以便更轻松/更直接地传递信息？任何指导将不胜感激。

相关行动创作者/ ajax致电

export const receivePost = (post) => ({
  type: RECEIVE_POST,
  post
})

export const requestSinglePost = (id) => (dispatch) => (
  APIUtil.fetchSinglePost(id).then(post => dispatch(receivePost(post)))
);

export const fetchSinglePost = (id) => {
  return $.ajax({
    method: 'GET',
    url: `api/posts/${id}`
  })
}

减速机：

const postReducer = (state = {}, action) => {
  Object.freeze(state);

    switch(action.type) {
      case RECEIVE_ALL_POSTS:
        return merge({}, state, action.posts)
      case RECEIVE_POST:
        const newPost = { currentPost: {[action.post.id]: action.post}}
        return merge({}, state, newPost)
      case REMOVE_POST:
        const nextState = merge({}, state);
        delete nextState[action.post.id];
        return nextState;
      default:
        return state;
    };
};

export default postReducer;

rootReducer

import { combineReducers } from 'redux';
import postReducer from './post_reducer';

const RootReducer = combineReducers({
  posts: postReducer,
});

export default RootReducer;

容器

import { connect } from 'react-redux';
import PostDetailView from './post_detail_view';
import { requestSinglePost } from '../../actions/post_actions';

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

const mapDispatchToProps = dispatch => ({
  requestSinglePost: id => dispatch(requestSinglePost(id))
});

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

组件

import React from 'react'
import { Link } from 'react-router'

class PostDetailView extends React.Component {
  componentDidMount() {
    this.props.requestSinglePost(this.props.match.params.postId);
  }

  componentWillReceiveProps(newProps) {
    if (newProps.match.params.postId !== this.props.match.params.postId) {
      this.props.requestSinglePost(newProps.match.params.postId);
    }
  }

    render () {

      if (!this.props.post) {
        return null;
      }

        return (
          <div>
            <h3>{this.props.post.title}</h3>
            <p>{this.props.post.body}</p>
          </div>
        );
      }
    }


export default PostDetailView;

在React-Redux中创建一个显示/详细信息页面，如何正确传递道具

0 个答案: