javascript - 尝试使用容器的 Prop 映射 Redux 状态时遇到的困难

Question

我正在尝试熟悉 react-boilerplate 的流程.直到现在我都喜欢干净整洁和易于理解的东西，虽然我觉得我错过了一 block 拼图。如果有更多经验的人可以帮助我，那就太好了。

我现在面临的问题如下。

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

如何使用 Prop 映射此对象？

我确信我错过了一些重要的东西。

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

这是我的代码，您可以快速浏览一下。

索引.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);

Action .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
  };
}

商店.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;

该 Action 也在 reducers.js

中注册

import PostsReducer from 'containers/PostsIndex/reducer'

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

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

Answer 1

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

同时尝试调试这些方法，一旦看到数据的流向，就会变得更加清晰!