Реагировать - mapStateToProps - «состояние не определено»

Question

У меня возникла следующая проблема: используя приведенный ниже код, я получаю сообщение об ошибке:

this.props.posts не определено

Поскольку я следую руководству https://codeburst.io/redux-a-crud-example-abb834d763c9 a Я набрал все правильно, я совершенно запутался уже в начале своей карьеры React. Не могли бы вы помочь мне?

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Post from './Post';

class AllPost extends Component {
    render() {
        return (
            <div>
                <h1>All Posts</h1>
                {this.props.posts.map((post) => <Post key={post.id} post={post} />)}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        posts: state,
    }
}

export default connect(mapStateToProps)(AllPost);

Answer 1

Вам необходимо объявить начальное состояние. Таким образом, ваш this.props.posts не будет undefined.

const initialState = {
  posts: []
}

const postReducer = (state = initialState, action) => {
    switch(action.type) {
        case 'ADD_POST':
            return { ...state, posts: [...state.posts, action.data]}
        default:
            return state;
    }
}

export default postReducer;

Вторая ошибка находится внутри вашего mapStateToProps метода. Вам необходимо получить доступ к posts избыточному государственному ключу. posts: state.posts как я сделал ниже

import React, { Component } from 'react';
import { connect } from 'react-redux';
import Post from './Post';

class AllPost extends Component {
    render() {
        return (
            <div>
                <h1>All Posts</h1>
                {this.props.posts.map((post) => <Post key={post.id} post={post} />)}
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        posts: state.posts, // you need to access to posts key
    }
}

export default connect(mapStateToProps)(AllPost);

Answer 2

Большое спасибо за ваши усилия!

Ниже приводится postReducer:

const postReducer = (state = [], action) => {
    switch(action.type) {
        case 'ADD_POST':
            return state.concat([action.data]);
        default:
            return state;
    }
}

export default postReducer;

А вот и индекс. js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

import { createStore } from 'redux';
import { Provider } from 'react-redux';
import postReducer from './reducers/postReducer';

const store = createStore(postReducer);

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>, document.getElementById('root'));