React/Redux 访问 props

Question

我对如何在 React 组件中访问 Redux 状态内的字段有疑问：

减速器.js

import { fromJS } from 'immutable';
import { combineReducers } from 'redux';
import {
  LOAD_HEADERS_SUCCESS,
  LOAD_HEADERS_ERROR
} from '../constants';

const initialState = fromJS({
  posts: []
});

const homeReducer = (state = initialState, action) => {
  switch(action.type) {
    case LOAD_HEADERS_SUCCESS:
      return Object.assign({}, state, {
        posts: action.payload
      });
    case LOAD_HEADERS_ERROR:
      return state;
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  homeReducer
});

export default rootReducer;

我使用 redux-saga 来处理外部 API 调用

Sagas.js

import { call, put, takeEvery, takeLatest, all } from 'redux-saga/effects';
import { fetchHeaders } from '../api';
import { loadHeaderSuccess, loadHeaderError } from '../actions';

import {
  LOAD_HEADERS_REQUEST,
} from '../constants';


function* loadPostsHeader(action) {
  try {
    const response = yield call(fetchHeaders);
    yield put(loadHeaderSuccess(response.data));
  } catch (error) {
    yield put(loadHeaderError(error));
  }
}

function* headerSaga() {
  yield takeLatest(LOAD_HEADERS_REQUEST, loadPostsHeader);
}

export default function* rootSaga() {
  yield all([
    headerSaga()
  ]);
}

主页.js

import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';

import H2 from '../../components/H2';
import Section from './Section';
import PageBlock from '../../components/PageBlock';
import P from '../../components/P';

import { loadHeaderRequest } from '../../actions';

class HomePageContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function
  componentDidMount() {
    this.props.onHomeLoad();
  }

  render() {
    const { posts } = this.props;

    return (
      <div>
        <PageBlock>
            <div>
                <H2>
                  Latest Articles
                </H2>
                <P>
                  { posts != undefined ? posts[0].title : 'ERR' }
                </P>
            </div>
        </PageBlock>
      </div>
    );
  }
}

HomePageContainer.PropTypes = {
  posts: PropTypes.array,
  onHomeLoad: PropTypes.func
};

const mapStateToProps = state => {
  console.log(state.homeReducer.posts);
  return { posts: state.homeReducer.posts };
};

const mapDispatchToProps = dispatch => {
  return {
    onHomeLoad: () => {
      dispatch(loadHeaderRequest());
    }
  };
};

const HomePage = connect(mapStateToProps, mapDispatchToProps)(HomePageContainer);

export default HomePage;

问题出在mapStateToProps ：如果我使用state.homeReducer.posts一切正常，否则如果我尝试state.posts ，则帖子始终未定义。

我见过很多直接访问字段的例子，中间没有reducer的名字。

我想知道为什么我的代码不是这种情况。

谢谢！

Answer 1

我使用 state.homeReducer.posts 一切正常，否则如果我尝试 state.posts，posts 总是未定义的。

你这样设置。 homeReducer是状态树中的一个子分支。 您需要使用它才能访问它的数据。 但最好以不同的方式称呼它，例如：

const rootReducer = combineReducers({
  home: homeReducer
});

然后你会使用state.home.posts 。

Answer 2

如果你想要一个模块中的所有减速器，你可以直接使用 state.posts，为此你可以删除 combineReducers

const rootReducer = homeReducer;

export default homeReducer;