несколько рассылок с обратным вызовом в реагирующем хуке? - PullRequest
Новая
       8

несколько рассылок с обратным вызовом в реагирующем хуке?

1 голос
/ 22 июня 2019

как добавить loading состояние в true в 'addItem' (регистр редуктора) и установить для состояния loading значение false?

Но я застрял, используя реагирующий крюк https://codesandbox.io/s/new-water-vczdp

Я сделал это здесь: https://codesandbox.io/s/react-todolist-3dko3 со старой версией реакции.

Что здесь делать? 

case "addItem": {
      //fakeHttp();

      const { toAddItem, items } = state;
      const nextId = +items[items.length - 1].id + 1;

      return {
        items: [...items, { id: nextId, name: toAddItem }],
        loading: false
      };
    }

1 Ответ

0 голосов
/ 22 июня 2019

Вам не нужно вызывать асинхронные функции в вашем редукторе.Вы должны использовать другие крючки для этого.В вашем случае вы должны использовать useCallback hook: 

function App() {
  const [{ items, toAddItem, loading }, dispatch] = useReducer(
    reducer,
    initialState
  );

  const addItem = useCallback(() => {
    async function fakeHttp() {
      dispatch({ type: "loading" });
      await delay(500);
      dispatch({ type: "addItem"})
    }
    fakeHttp();
  }, []);

  return (
    ...
    <AddList
        handleInput={e =>
          dispatch({ type: "handleInput", value: e.target.value })
        }
        toAddItem={toAddItem}
        addItem={addItem}
        loading={loading}
      />
  )
}

Я внесу некоторые изменения в ваш пример с песочницей.Вы можете увидеть рабочий пример здесь: https://codesandbox.io/embed/stupefied-currying-l39il

...