0

В сайт который был написан на реакте надо добавить языковую поддержку.Я решил использовать useReducer (ранее с этим хуком не работал только с redux).Короче добавил папку reducer на корень проекта написал такой базовый reducer и создал контекст.

const initialState = {lang: "en"};

function reducer(state, action) {
  switch (action.type) {
    case 'changeEN':
      return {lang: "en"};
    case 'changeRU':
      return {lang: "de"};
    default:
      throw new Error();
  }
}

export {initialState,reducer};

Начнем с Header

export const Header = () => {
    const [state, dispatch] = useReducer(reducer, initialState);

    return (
        <LanguageContext.Provider value={state.lang}>
            <header id="header">
                <div className="col header_home">
                     <NavLink to="/" exact>{state.lang === "en" ? "переводим на нужный язык" : "переводим на нужный язык"}</NavLink>
                     <NavLink to="/goods">{state.lang === "de" ? "переводим на нужный язык" : "переводим на нужный язык"}</NavLink>
                </div>
                <div className="lang">
                     <span onClick={() => dispatch({type: 'changeEN'})}>EN</span> |
                     <span onClick={() => dispatch({type: 'changeRU'})}>RU</span>
                </div>
            </header>
        </LanguageContext.Provider>
    )
}

Тут все понятно и работает нажимаю на кнопки он переводит блеск.Ну вот есть другой независимый компонент.

тут я делаю import сверху

import {reducer,initialState} from "путь какой то";

export  const Something = () => {
    const [state] = useReducer(reducer, initialState);

    console.log(state.lang); //Вот тут

И (сверху показал где) он мне показывает всегда en ? Почему это так?В компоненте Header глобальный state изменилсья разве и тут не должно было измениться?Везде же он одинаковый как в redux разве нет?.Подскажите что я делаю неправильно?

1 ответ 1

1

<LanguageContext.Provider value={state.lang}> - эта строка не делает твоё состояние глобальным, если ты конечно так думал, потому что я не знаю ещё почему ты так решил. Либо передавай его пропсами, либо используй правильно контекст. Написал тебе небольшой пример https://codesandbox.io/s/jolly-carson-ucvoh, надеюсь разберешься.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.