redux - ajaxが解決するまで未定義のRedux状態とコンポーネントプロパティ

Question

私のコンポーネントは、関数を使用して props を介していくつかのプロパティを取得します。

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

同じコンポーネントで ajax を使用して状態キーワードを取得しました。

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

コンポーネントが 2 回レンダリングされます。まず、ajax が解決される前に、私の render メソッドで未定義になりました。

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())
  }
}

すべて実世界の還元例に基づく

私の解決策

キーワード エンティティに初期状態を指定します。私は ajax を介してこのような json を取得しています: {'locale': 'en', 'keywords': ['keyword1', 'keyword2']}レデューサーで説明したとおりです。

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': [] } }