React-redux Reducer не передает объект в магазин

У меня проблема, и мне действительно нужна помощь. Я очень новичок, чтобы реагировать и реагировать-redux, поэтому решение, вероятно, проще, чем я мог подумать (я надеюсь на это). У меня есть простой сайт, который содержит ссылки (от response-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.info (action.payload) в case в редукторе, он отлично показывает объект, содержащий рецепт, в консоли. Но когда я помещаю {this.props.recipe.name} в Post.js, я получаю сообщение об ошибке: this.props.recipe не определен. Любая помощь очень ценится. Чтобы быть уверенным, я также выложу код редуктора и действий.

Редуктор:

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
});