В регрессивно-интерактивном веб-приложении, как узнать одно действие асинхронного действия, наконец отправлено в состояние

Question

Rudx-thunk отлично поработал для отправки асинхронных действий, в конечном итоге он изменит состояние, выбранное в асинхронном действии. Но как мне узнать момент, когда он, наконец, изменит состояние редукции?

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

Обновление # 1 показывает некоторый код, чтобы выразить себя лучше.

// reducer 
(state, action) => Object.assign({}, state, {config: action.config}); 

// action creator 
const fetchConfig =() => (dispatch) => { 
    fetch('http://server.com/...') 
    .then(config=>dispatch({type: 'LOAD_CONFIG', config})) 
} 

// connect reducer to state 
createStore({config: configReducer}) 

// render 
import { render } from 'react-dom'; 
render (<App><News /></App>) 

// some component consume state.config 
@connect(state=>{config: state.config}) 
const News = props=>(
    <div> 
     {(props.config === '...')? <div>...</div> : <div>...</div>} 
    </div> 
) 

выше выглядит хорошо, однако из-за действия может занять некоторое время и обновление состояния после того, как компонент первой визуализации, поэтому компонент может отображать неожиданные результаты. То, что я действительно хочу сделать, это (я просто записать рендер часть, другие должны быть одинаковыми):

// render 
loadConfigFinished 
.then(()=> render((<App><News /></App>))) 

Или

// render 
on('loadConfigFinished',()=> render((<App><News /></App>))); 

Вероятно, я должен сделать 2-й путь, просто боюсь его не является редукцией-у.

Как бы то ни было, приведенный выше пример - это пример, который иногда нам нужно уведомлять, когда какое-либо действие, наконец, отправляется в состояние redux.

Answer 1

Посмотрев на свой код, я собираю ваш вопрос просто: когда я визуализирую компонент, который зависит от данных с сервера, ожидая этих данных, не передавая undefined в мой компонент?

Я бы компонент контейнера, который подключается к состоянию конфигурации, и условно делает компонент, который нуждается в нем, или шаблон загрузки:

const Container = props => { 
    if (props.config) { 
    return <ConfiguredComponent config={props.config} /> 
    } else { 
    return <Loading /> 
    } 
} 

Answer 2

export function readConfig() { 
    return (dispatch) => { 
    dispatch(readingConfig()); 

    someAsyncFunction((error, result) => { 
     if (!error) { 
     dispatch(readConfigSuccess(result)); 
     } else { 
     dispatch(readConfigFail(error)); 
     } 
    }); 
    } 
} 

И, конечно же, readConfigSuccess, readConfigFail и readingConfig являются действия функции создателя, возвращающие объекты действий и т.д .:

export const READING_CONFIG = 'READING_CONFIG'; 
export function readingConfig() { 
    return { 
    type: READING_CONFIG, 
    } 
} 

Answer 3

Когда ваши переходы обрабатывать действия readConfigSuccess, они уточняют Redux состояние.

Приложение получает повторную визуализацию с обновленными реквизитами для всех изменений состояния, поэтому нет ничего особенного в этом конкретном действии.

За исключением того, что обычно изменяется только небольшая часть состояния, а ревердер очень похож на предыдущий рендер, и здесь я ожидаю, что относительно большая часть состояния будет изменена редукторами для этого конкретного действия и rerender сделает много измененное приложение.

Это не для вас, чтобы беспокоиться, хотя, это должно просто работать.

Или вы имеете в виду что-то еще, хотите ли вы сделать больше асинхронной работы в результате получения конфигурации?