Redux состояние и компонентное свойство не определенно до AJAX решает

Question

Моего компонента получить некоторые свойства с помощью реквизита с функцией:

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

Я получил государственные ключевые слова с помощью Ajax, в том же компоненте:

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

Моего компонент получает визуализацию дважды. Во-первых, перед АЯКС решает, поэтому в моей визуализации метод, который я получил неопределенные:

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

Все данные на основе Real world redux example

Мое решение

Данное исходное состояние для объектов с ключевыми словами. Я получаю json вот так через ajax: {'locale': 'en', 'keywords': ['keyword1', 'keyword2']} Однако, поскольку я использую normalizr с locale как id, для получения результатов кеширования, начальное состояние, как я описываю в редукторе:

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

    return state 
} 

Что мне не нравится это начальное, если у нас есть несколько языков, а также помнить, чтобы изменить его, если мы добавим еще один язык, например, фр. В этом

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

должно быть:

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

Answer 1

Эта линия выглядит проблематичной:

const { keywords } = this.props.keywords 

Это эквивалент:

var keywords = this.props.keywords.keywords; 

Я сомневаюсь, что это то, что вы хотели.

Еще одна вещь, которую стоит проверить, - это keywords[locale] в вашем mapStateToProps(), который, вероятно, изначально разрешит неопределенное. Убедитесь, что ваш компонент может справиться с этим, или дать ему разумное значение по умолчанию.