Как экспортировать различный контент в зависимости от хранилища redux для реагирования компонентов? - PullRequest
Новая
       5

Как экспортировать различный контент в зависимости от хранилища redux для реагирования компонентов?

0 голосов
/ 11 июля 2020

У меня есть список, который я использую во многих местах. И я не хочу повторяться. Но его содержание варьируется в зависимости от магазина redux. Я попробовал вариант ниже, но он не работает. Как я могу это исправить?

список. js

import store from "./store";

let language = store.getState().language;

store.subscribe(() => {
  language = store.getState().language;
});

export default [
  {
    id: "1",
    title: language === "EN" ? "Hello" : "Hola"
  },
  {
    id: "2",
    title: language === "EN" ? "World" : "Mundo"
  },
  {
    id: "3",
    title: language === "EN" ? "nice to meet you" : "Encantado de conocerte"
  }
];

приложение. js

import React from "react";
import list from "./list";

const App = () => {
  return (
    <ul>
     {list.map(item => <li key={item.id}>{item.title}</li>)}
    </ul>
  )
}

export dafault App

Теперь я использую следующий подход, но я повторяйте этот список каждый раз, когда он мне нужен

приложение. js

import React from "react";
import { useSelector } from "react-redux";

const App = () => {
  const language = useSelector((state) => state.language);
  
  const list = [
  {
    id: "1",
    title: language === "EN" ? "Hello" : "Hola"
  },
  {
    id: "2",
    title: language === "EN" ? "World" : "Mundo"
  },
  {
    id: "3",
    title: language === "EN" ? "nice to meet you" : "Encantado de conocerte"
  }
];

  return (
    <ul>
     {list.map(item => <li key={item.id}>{item.title}</li>)}
    </ul>
  )
}

export dafault App

1 Ответ

0 голосов
/ 11 июля 2020

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

// list.js

export default language => [
  {
    id: "1",
    title: language === "EN" ? "Hello" : "Hola"
  },
  {
    id: "2",
    title: language === "EN" ? "World" : "Mundo"
  },
  {
    id: "3",
    title: language === "EN" ? "nice to meet you" : "Encantado de conocerte"
  }
];

// app.js
import React from "react";
import { Provider } from "react-redux";
import getList from "./list";

const App = () => {
  const list = useSelector(state => getList(state.language));
  return (
    <ul>
     {list.map(item => <li key={item.id}>{item.title}</li>)}
    </ul>
  )
}

export default App;

Обязательно оберните <App /> в <Provider store={store}></Provider> в соответствии с документами response-redux .

...