react-redux Reducer 不会将对象传递给商店

Question

我有一个问题，我真的需要一些帮助。我对 react 和 react-redux 很陌生，所以解决方案可能比我想象的要简单（我希望如此）。我有一个简单的站点，其中包含带有食谱名称的链接（来自 react-router）：

class Posts extends Component {

    componentWillMount() {
        this.props.fetchPosts();
    }

    componentWillReceiveProps(nextProps) {
        if (nextProps.newPost) {
            this.props.posts.unshift(nextProps.newPost);
        }
    }


    render() {
        const postItems = this.props.posts.map(recipe => (
            <div key={recipe.id}>
                <Link to={`/recipe/id/${recipe.id}`}>{recipe.name}</Link>
            </div>
        ));

        return (

            <Router>
            <div>
                <h1>Well yeah</h1>
                {postItems}
                <Route path={`/recipe/id/:recipeId`} component={Post}/>
            </div>
            </Router>
        );
    }
}
Posts.propTypes = {
    fetchPosts: PropTypes.func.isRequired,
    posts: PropTypes.array.isRequired,
    newPost: PropTypes.object,
};

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

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

现在，我还有一个组件 Post，它应该是一个单一的配方。

class Post extends Component {
    static propTypes = {};

    componentDidMount() {
        this.props.fetch();
    }

    render() {
        return (
            <div>Hello{this.props.recipe.name}</div>
        );
    }
}

Post.propTypes = {
    fetch: PropTypes.func.isRequired,
    recipe: PropTypes.object
};

const mapDispatchToProps = (dispatch, ownProps) => ({
    fetch: () => {
        dispatch(fetchPostById(ownProps.location.pathname))
    }
});
const mapStateToProps = state => ({

    recipe: state.posts.recipe
});
export default connect(mapStateToProps, mapDispatchToProps)(Post);

无论我做什么，我似乎都无法使其正常工作。我有一个获取单个食谱的操作（我可以毫无问题地获取食谱列表），然后将其传递给减速器。但是，当我将console.log(action.payload) 放在reducer 中时，它会在控制台中显示包含配方的对象。但是当我将 {this.props.recipe.name} 放在 Post.js 中时，我收到一个错误 this.props.recipe 未定义。非常感谢任何帮助。可以肯定的是，我还将发布 reducer 的代码和操作。

减速机：

const initialState = {
    items: [],
    item: {},
    recipe:{}

};

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_RECIPES:
            return {
                ...state,
                items: action.payload
            };
        case NEW_RECIPE:
            return {
                ...state,
                item: action.payload
            };
        case FETCH_RECIPE_ID:
            return{
                ...state,
                recipe:action.payload
            };
        default:
            return state;
    }

}

动作：

export const fetchPosts = () => dispatch => {
    fetch('http://192.168.1.3:6996/recipe')
        .then(res => res.json())
        .then(recipes => dispatch({
            type: FETCH_RECIPES,
            payload: recipes
        }));

};
export const createPost = (postData) => dispatch => {
    fetch('http://192.168.1.3:6996/recipe', {
        method: 'POST',
        headers: {
            'content-type': 'application/json'
        },
        body: JSON.stringify(postData)
    }).then(res => res.json()).then(recipe => dispatch({
        type: NEW_RECIPE,
        payload: recipe
    }))

};
export const fetchPostById= (id) => dispatch => {
    fetch('http://192.168.1.3:6996' + id)
        .then(recipe => recipe.json())
        .then(recipe => dispatch({
        type: FETCH_RECIPE_ID,
        payload: recipe
    }))
};

主减速器：

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

export default combineReducers({
    posts: postReducer
});

Answer 1

在晚上关闭 WebStorm 后，该网站在第二天早上启动并且运行良好。我对 react-router 部分有问题，但我会发布不同的问题，所以我不会违反任何规则。非常感谢！

Answer 2

在recipe: state.posts.recipe 这一行中，您暗示在您的状态中有一个包含您的配方的帖子对象，但是在减速器中，我没有看到您的状态中的任何帖子对象。尝试将其更改为这一行 recipe: state.recipe