1

react-boilerplateの流れに慣れようとしています。私は今まで、物事がきちんときれいで分かりやすいことが大好きですが、パズルのピースが欠けていると感じています. より多くの経験を持つ誰かが私を助けてくれたらいいのにと思います。

私が現在直面している問題は次のとおりです。

  • 特定のコンポーネントの componentWillMount() 内でアクションをトリガーしています。
  • アクションは で作成されています。これは で作成されactions.jsた単純な get リクエストaxiosです。
  • データは promise ミドルウェア ライブラリで処理されていますredux-promise。
  • 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
  ];

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

2 に答える 2

1

この GitHub の問題は、この正確な問題をカバーしています: https://github.com/reactjs/react-redux/issues/60。

mapStateToProps 関数でマップから値を手動で抽出する必要がありました。

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

このStackOverflow の投稿に感謝します。

于 2016-12-06T12:26:00.867 に答える