尝试使用容器的道具映射 Redux 状态时遇到的困难答案

【问题标题】：Difficulties when try to map the Redux state with the props of the container尝试使用容器的道具映射 Redux 状态时遇到的困难
【发布时间】：2017-04-20 23:55:18
【问题描述】：

我正在尝试熟悉react-boilerplate 的流程。直到现在我都喜欢事物的简洁明了，虽然我觉得我错过了一块拼图。如果有更多经验的人可以帮助我，那就太好了。

我目前面临的问题如下。

我正在触发特定组件的 componentWillMount() 中的操作。
正在actions.js 中创建操作，它是使用axios 发出的简单获取请求。
正在 Promise 中间件库 redux-promise 中处理数据。
promise 现在被传递到特定组件的 reducer 中，其中将返回整个状态和我需要的数据。
试图在组件上捕获此状态是我失败的地方。我正在尝试 mapStateToProps，但找不到我需要的数据，而是收到了 Map {}。

如何用我的道具映射这个对象？

我确定我错过了一些重要的事情。

这是我的回购。 https://github.com/paschalidi/blog-react-redux

这是我的代码，所以你可以看一下。

index.js

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { fetchPosts } from './actions'
import selectPostsIndex from './selectors'

export class PostsIndex extends React.Component { // eslint-disable-line react/prefer-stateless-function
  componentWillMount() {
    this.props.fetchPosts();
  }

  render() {
    return (
      <div>
        <h3>Posts</h3>
        <ul className="list-group">
          A list would render here. 
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log(state.posts)
  //return { posts: state } //****I dont get why the redux state is not being given here.
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchPosts }, dispatch);
}

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

actions.js

import axios from 'axios'
import { FETCH_POSTS } from './constants';

const ROOT_URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '?key=dsklhfksdhfjkdshfkjdshkj';

export function fetchPosts() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`);
  return {
    type: FETCH_POSTS,
    payload: request
  };
}

store.js

import promise from 'redux-promise';

const middlewares = [
    sagaMiddleware,
    routerMiddleware(history),
    promise
  ];

reducer.js

import { fromJS } from 'immutable';
import {
  FETCH_POSTS
} from './constants';

const initialState = fromJS({ all:[], post: null });

function postsIndexReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_POSTS:
      return { ...state, all: action.payload.data };
    default:
      return state;
  }
}

export default postsIndexReducer;

该动作也在 reducers.js

中注册

import PostsReducer from 'containers/PostsIndex/reducer'

export default function createReducer(asyncReducers) {
  return combineReducers({
    route: routeReducer,
    language: languageProviderReducer,

    posts: PostsReducer,
    form: reduxFormReducer,
    ...asyncReducers,
  });
}

【问题讨论】：

标签： javascript reactjs promise redux react-boilerplate

【解决方案1】：

注意我没有测试你的代码，但看起来你的减速器将获取的数据放在你的全局状态 posts 字段的字段 all 中，但你的 mapStateToProps 没有选择它。请注意，mapStateToProps 应该分割给定组件感兴趣的全局状态部分。

成功获取state 后，您在mapStateToProps 中收到的内容应如下所示：

{
  posts: {
    all: // whatever fetch returned
    post: null
  }
}

所以你的mapStateToProps 可能看起来像这样（注意这个方法接收全局状态作为参数，而不仅仅是特定的reducer）：

function mapStateToProps(state) {
  // in component this.props.posts is { all: /* fetch result */, post: null }
  return { posts: state.posts } 
}

也尝试调试这些方法，一看到数据流就更清楚了！

【讨论】：

您说，在成功获取后，您在 mapStateToProps 中收到的状态应该如下所示：问题是我根本没有捕捉到它。提前致谢
让我纠正一下自己，在 mapStateToProps 中正在接收 Map {}。如何将这个对象映射到我的状态是新的挑战。 const mapStateToProps = (state) => { return { posts: state.get('posts'), }; } 也许这样的事情会给我解决方案

【解决方案2】：

这个 GitHub 问题涵盖了这个确切的问题：https://github.com/reactjs/react-redux/issues/60。

我必须在 mapStateToProps 函数中手动从地图中提取值：

const mapStateToProps = (state) => {
  return {
       posts: state.get('posts'),
  };
}

感谢this StackOverflow 的帖子。

【讨论】：