Redux 状态不会传播到组件

Question

我一直在尝试使用 Reacts 组件功能制作组件。在这种情况下，我对 componentDidMount 特别感兴趣。

但是，无论我尝试什么，我的状态都不会传播到组件。

组件如下：

class MainPage extends React.Component
{
    componentDidMount() {
        this.props.actions.requestPosts();
    }
    render() {
        return(
            <div className="main-page">
                <PreviewList posts={this.props.posts}/>
            </div>
        );
    }
}

const mapStateToProps = state => ({
    posts: state.main_posts,
    errors: state.main_errors
});

const mapDispatchToProps = dispatch => {
    return {
        actions: {
            requestPosts: () => dispatch(requestPosts())
        }
    }
};

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

减速器：

export default (state = {main_posts: [], main_errors: []}, action) => {
    switch(action.type) {
        case USER_REQUESTS_POSTS_SUCCEEDED:
            return Object.assign({}, state, {
                main_posts: action.posts
            });
        case USER_REQUESTS_POSTS_FAILED:
            return Object.assign({}, state, {
                main_errors: action.errors
            });
        default:
            return state;
    }
};

为了简单起见，我没有包含导入语句。我使用 redux-thunk。我已经测试了这些动作，它们成功地到达了减速器。新状态创建成功并返回。然而，它根本没有到达所需的组件。

我已经尝试研究，但我只找到了改变状态的 reducer 的例子，但我看不到任何我改变状态的地方。我究竟做错了什么？（具有讽刺意味的是，该代码与我其他运行良好的 React 应用程序相似）。

如果有帮助，这是我的店铺：

export const history = createHistory();

const middleware = [
    thunk,
    routerMiddleware(history)
];

const reducers = {
    main: mainReducer,
    router: routerReducer
};

const store = createStore(
    combineReducers(reducers),
    {},
    applyMiddleware(...middleware)  
);

export default store;

编辑：根据要求，这是我的操作：

export const USER_REQUESTS_POSTS_SUCCEEDED = 'user/REQUESTS/POSTS/SUCCESS';
export const USER_REQUESTS_POSTS_FAILED = 'user/REQUESTS/POSTS/FAILURE';

export const requestPosts = () => {
    return function(dispatch) {
        return fetchPosts().then(
            posts => dispatch(requestPostsSucceeded(posts)),
            errors => dispatch(requestPostsFailed(errors))
        );
    };
};

function fetchPosts() {
    return Promise.resolve([{title: 'Test Post', content_short: 'Hello World', author: 'Extremo', category: 'development', tags: ['test'], date: '15.11.17'}]);
}

export const requestPostsSucceeded = (posts) => {
    return {type: USER_REQUESTS_POSTS_SUCCEEDED, posts: posts};
};

export const requestPostsFailed = (errors) => {
    return {type: USER_REQUESTS_POSTS_FAILED, errors: errors};
};

Answer 1

您的 mapStateToProps 函数应该是：

function mapStateToProps(state) {
  return {
    posts: state.main.main_posts,
    errors: state.main.main_errors
  }
}

您目前undefined

传递帖子和错误

Answer 2

来自商店定义

const reducers = {
    main: mainReducer,
    router: routerReducer
};

您应该使用 component reducer's key

访问您的组件状态

也就是 main.

const mapStateToProps = state => ({
    posts: state.main.main_posts,
    errors: state.main.main_errors
});

Redux 状态不会传播到组件

Redux state wont propagate to component

javascript

reactjs

redux

redux-thunk