Реагируйте useContext, дочерний компонент useRedux не обновляется - PullRequest
Новая
       45

Реагируйте useContext, дочерний компонент useRedux не обновляется

0 голосов
/ 28 января 2019

Реагирование приложения с использованием хуков. Я использую React Hooks useContext и useReducer для имитации Redux. Однако при обновлении значения Context.Provider (счетчик) дочерние компоненты не обновляются.Почему дочерний компонент не перерисовывается?

Store.js 

import React, {  useReducer } from 'react';
import reducer from '../State/Reducer';
let initialState = {
  count: 99  
};

export const StoreContext = React.createContext(initialState, () => {});

function Store({ children }) {
  const [state, dispatch] = useReducer(reducer, initialState);
  const val = { state, dispatch };
  return <StoreContext.Provider value={val}>{children}</StoreContext.Provider>;
}

export default Store;

Counter.js 

import React, {  useContext} from 'react';
import {inc} from '../State/Actions';
import { StoreContext } from './Store';


const Counter = () => {
  const {state,dispatch} = useContext(StoreContext)
  const {count}=state;

  return (
    <div>
      <h1>count: {count}</h1>      
      <button
        type="button"
        onClick={() => {      
          dispatch(inc());          
        }}
      >
        Inc
      </button>
    </div>
  );
};
export default Counter;

У меня есть пример кода в CodeSandbox https://codesandbox.io/s/github/kyrlouca/react-hooks-counter

1 Ответ

0 голосов
/ 28 января 2019

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

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

Создание контекста типа 

export const StoreContext = React.createContext(initialState);

работает

Рабочая демонстрация

PS Вы можете проверить, как calculateChangedBits используется в ReactContext здесь и здесь

...