Question

我一直在尝试通过构建一个简单的博客来学习redux。

一切似乎进展顺利，直到我使用react-router require组件在博客列表页面中使用博客标题导航到博客详细信息页面。

所以，我有以下反应路线：

Root（/）
显示帖子（/ posts /：id）

如果我通过在浏览器中输入它们来访问每条路线，它就可以正常工作。

然而，问题是当我在根页面时，然后我点击链接转到博客帖子详细信息路径。

这是我的redux状态：

Link

我还能弄明白为什么我会收到错误。

当我在根路径中时，我的redux状态为import { FETCH_POST_LIST_REQUEST, FETCH_POST_LIST_SUCCESS, FETCH_POST_LIST_ERROR, FETCH_POST_REQUEST, FETCH_POST_SUCCESS, FETCH_POST_ERROR, CREATE_POST_REQUEST, CREATE_POST_SUCCESS, CREATE_POST_ERROR } from '../constants' const initialState = { postsList: { data: { collection: [] }, isLoading: false }, newPost: { data: {}, isLoading: false }, post: { data: {}, isLoading: false } } const posts = function(state = initialState, action) { switch (action.type) { case FETCH_POST_LIST_REQUEST: return { postsList: { data: { collection: [] }, isLoading: true } } case FETCH_POST_LIST_SUCCESS: return { postsList: { data: action.data, isLoading: false } } case FETCH_POST_LIST_ERROR: return { postsList: { data: [], isLoading: false } } case FETCH_POST_REQUEST: return { post: { data: {}, isLoading: true } } case FETCH_POST_SUCCESS: return { post: { data: action.data, isLoading: false } } case FETCH_POST_ERROR: return { post: { data: {}, isLoading: false } } case CREATE_POST_REQUEST: return { newPost: { data: {}, isLoading: true } } case CREATE_POST_SUCCESS: return { newPost: { data: action.data, isLoading: false } } case CREATE_POST_ERROR: return { newPost: { data: {}, isLoading: false } } default: return state } }

当我直接进入节目路径时，我的redux状态变为posts: { postsList: ... }

当我点击posts: { post: ... }时，我应该将我转到Link，然后呈现以下容器：

/posts/1

此容器已连接到以下组件：

import PostShow from '../components/post-show'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actionCreators from '../actions'

const mapStateToProps = function(state) {
  return {
    data: state.posts.post.data,
    isLoading: state.posts.post.isLoading
  }
}

const mapDispatchToProps = function(dispatch) {
  return {
    actions: bindActionCreators(actionCreators, dispatch)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(PostShow)

从根路径转换为show path后，通过单击react-router链接，在以下代码中：

import React from 'react'

class PostShow extends React.Component {
  componentDidMount() {
    this.props.actions.fetchPost(this.props.id)
  }

  render() {
    return (
      <div>
        {
            this.props.isLoading ?
            'Loading...' :
            (
             <div className="post">
              <p className="title">{this.props.data.title}</p>
              <p className="content">{this.props.data.content}</p>
              <p className="author">{this.props.data.author}</p>
            </div>
            )
        }
      </div>
    )
  }
}

export default PostShow

redux状态仍然是const mapStateToProps = function(state) { return { data: state.posts.post.data, isLoading: state.posts.post.isLoading } }，而不是posts: { postsList: ... }，这导致posts: { post: ... }出错，导致容器抛出错误。

我正在做的事情，只有在componentDidMount中触发商店调度后才会更改状态：

state.posts.post.data

我想我要么做错事，要么错过了什么。

任何人都可以帮我吗？

感谢。

Answer 1

你必须稍微改变你的减速器，

const posts = function(state = initialState, action) {
  switch (action.type) {
  case FETCH_POST_LIST_REQUEST:
    return {
      ...state,
      postsList: { data: { collection: [] }, isLoading: true }
    }
  case FETCH_POST_LIST_SUCCESS:
    return {
      ...state,
      postsList: { data: action.data, isLoading: false }
    }
  case FETCH_POST_LIST_ERROR:
    return {
      ...state,
      postsList: { data: [], isLoading: false }
    }
  case FETCH_POST_REQUEST:
    return {
      ...state,
      post: { data: {}, isLoading: true }
    }
  case FETCH_POST_SUCCESS:
    return {
      ...state,
      post: { data: action.data, isLoading: false }
    }
  case FETCH_POST_ERROR:
    return {
      ...state,
      post: { data: {}, isLoading: false }
    }
  case CREATE_POST_REQUEST:
    return {
      ...state,
      newPost: { data: {}, isLoading: true }
    }
  case CREATE_POST_SUCCESS:
    return {
      ...state,
      newPost: { data: action.data, isLoading: false }
    }
  case CREATE_POST_ERROR:
    return {
      ...state,
      newPost: { data: {}, isLoading: false }
    }
  default:
    return state
  }
}

看看这里：http://redux.js.org/docs/basics/Reducers.html

单击react-router Link时mapPropsToState出错

1 个答案: