0

我的组件通过具有以下功能的道具获取一些属性：

const mapStateToProps = state => {
  const { entities: { keywords } } = state
  const {locale} = state
  return {
    keywords: keywords[locale]
  }
}

我在同一个组件中使用 ajax 获得了状态关键字：

  componentDidMount() {
    this.props.loadKeywords()
  }

我的组件被渲染了两次。首先，在 ajax 解析之前，所以在我的渲染方法中我得到了未定义：

render() {
  const { keywords } = this.props.keywords  
  ...

哪个是解决它的正确方法？我改成componentDidMount没有componentWillMount成功。

现在，基于现实世界的例子，我已经用一个空对象初始化了关键字状态：

function entities(state = { users: {}, repos: {}, keywords: {} }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities)
  }

  return state
}

我的减速机：

import { combineReducers } from 'redux'
import { routerReducer as router } from 'react-router-redux'
import merge from 'lodash/merge'
import locale from './modules/locale'
import errorMessage from './modules/error'
import searchText from './modules/searchText'

// Updates an entity cache in response to any action with response.entities.
function entities(state = { users: {}, repos: {}, keywords: {} }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities)
  }

  return state
}

export default combineReducers({
  locale,
  router,
  searchText,
  errorMessage,
  entities
})

我的行动：

import { CALL_API, Schemas } from '../middleware/api'
import isEmpty from 'lodash/isEmpty'

export const KEYWORDS_REQUEST = 'KEYWORDS_REQUEST'
export const KEYWORDS_SUCCESS = 'KEYWORDS_SUCCESS'
export const KEYWORDS_FAILURE = 'KEYWORDS_FAILURE'

// Fetches all keywords for pictos
// Relies on the custom API middleware defined in ../middleware/api.js.
function fetchKeywords() {
  return {
    [CALL_API]: {
      types: [ KEYWORDS_REQUEST, KEYWORDS_SUCCESS, KEYWORDS_FAILURE ],
      endpoint: 'users/56deee9a85cd6a05c58af61a',
      schema: Schemas.KEYWORDS
    }
  }
}

// Fetches all keywords for pictograms from our API unless it is cached.
// Relies on Redux Thunk middleware.
export function loadKeywords() {
  return (dispatch, getState) => {
    const keywords = getState().entities.keywords
    if (!isEmpty(keywords)) {
      return null
    }
    return dispatch(fetchKeywords())
  }
}

全部基于真实世界的 redux 示例

我的解决方案

给定关键字实体的初始状态。我通过 ajax 得到这样的 json: {'locale': 'en', 'keywords': ['keyword1', 'keyword2']} 但是，当我使用带有语言环境的 normalizr 作为 id 时，为了缓存结果，我的初始状态正如我在减速器中描述的那样：

function entities(state = { users: {}, repos: {}, keywords: { 'en': { 'keywords': [] } } }, action) {
  if (action.response && action.response.entities) {
    return merge({}, state, action.response.entities)
  }

  return state
}

如果我们有多种语言，我不喜欢的是初始，如果我们添加另一种语言（例如 fr），也要记得修改它。在这个

keywords: { 'en': { 'keywords': [] } }

应该：

keywords: { 'en': { 'keywords': [] }, 'fr': { 'keywords': [] } }
4

1 回答 1

0

这条线看起来有问题：

const { keywords } = this.props.keywords

它相当于：

var keywords = this.props.keywords.keywords;

我怀疑那是你的意图。

另一件值得检查的事情是keywords[locale]你的mapStateToProps()，它最初可能会解析为未定义。确保你的组件可以处理这个问题，或者给它一个合理的默认值。

于 2016-03-09T01:25:18.797 回答