1

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

我目前面临的问题如下。

  • 我正在触发特定组件的 componentWillMount() 中的操作。
  • 该操作正在创建actions.js，它是一个简单的获取请求axios。
  • 数据在 promise 中间件库中进行处理redux-promise。
  • 承诺现在被传递到特定组件的减速器中，其中返回了整个状态和我需要的数据。
  • 试图在组件上捕获这种状态是我失败的地方。我正在尝试 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);

动作.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
  ];

减速器.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,
  });
}
4

2 回答 2

1

注意我没有测试你的代码，但看起来你的减速器将获取的数据放在all你的全局状态posts字段的字段中，但你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 } 
}

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

于 2016-12-06T11:24:48.627 回答
1

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

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

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

感谢这篇StackOverflow 帖子。

于 2016-12-06T12:26:00.867 回答