React-redux: должен ли рендер всегда происходить в том же ТИКе, что и отправка действия?

В моем приложении react-redux есть управляемый ввод текста. Каждый раз, когда компонент изменяет значение, он отправляет действие, и в конце концов значение возвращается через цикл redux и визуализируется.

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

У меня есть две теории на этот счет, и я хотел бы знать, какая из них верна:

• это должно работать, но у меня есть ошибка где-то в моем производственном приложении, которая вызывает задержку


• тот факт, что он работает в простом примере, - это просто удача, и react-redux не гарантирует, что рендеринг произойдет синхронно

Кто из них прав?

Рабочий пример:

Http://jsbin.com/doponibisi/edit?html,js, выход

const INITIAL_STATE = {

  value: ""

};



const reducer = (state = INITIAL_STATE, action) => {

  switch (action.type) {

    case 'SETVALUE':

      return Object.assign({}, state, { value: action.payload.value });

    default:

      return state;

  }

};



const View = ({

  value,

  onValueChange

}) => (

  <div>

    Sync: <input value={value} onChange={(e) => onValueChange(e.target.value)} /><br/>

    Async: <input value={value} onChange={(e) => { const v = e.target.value; setTimeout(() => onValueChange(v), 0)}} />

  </div>

);



const mapStateToProps = (state) => {

  return {

    value: state.value

  };

}



const mapDispatchToProps = (dispatch) => {

  return {

    onValueChange: (value) => {

      dispatch({

        type: 'SETVALUE',

        payload: {

          value

        } 

      })            

    }

  };

};





const { connect } = ReactRedux;

const Component = connect(

  mapStateToProps,

  mapDispatchToProps

)(View);



const { createStore } = Redux;

const store = createStore(reducer);



ReactDOM.render(

  <Component store={store} />,

  document.getElementById('root')

);

EDIT: уточняющий вопрос

Марко и Натан оба правильно указали, что это известная проблема в React, которая не будет исправлена. Если существует setTimeout или другая задержка между onChange и установкой значения, положение курсора будет потеряно.

Однако того факта, что setState просто планирует обновление, недостаточно, чтобы вызвать эту ошибку. В выпуске Github то, что Марко связал, есть комментарий:

Грубо говоря, setState не откладывает рендеринг, это пакетная обработка
обновляет и выполняет их немедленно, когда текущее задание React имеет
закончено, не будет никакого кадра рендеринга между ними. Так что в каком-то смысле,
операция выполняется синхронно по отношению к текущей визуализации
рамка. setTimeout планирует его для другого кадра рендеринга.

Это можно увидеть в Примере JsBin: версия" sync " также использует setState, но все работает.

Открытым остается вопрос: есть ли что-то внутри Redux, что создает задержку, которая позволяет кадру рендеринга быть промежуточным, или Redux может быть использован таким образом, чтобы избежать этих задержек?

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

EDIT: проблема решена

Я был доволен ответом Кларкса и даже удостоился награды, но оказалось, что это было неправильно, когда я действительно протестировал его, удалив все промежуточные программы. Я также нашел проблему github, которая связана с этим.

Https://github.com/reactjs/react-redux/issues/525

Ответ таков:

• это проблема в react-redux, которая будет исправлена с react-redux 5.1 и react v16