如何根据 redux store 导出不同的内容来反应组件？

Question

我有一个我在很多地方使用的列表。 我不想重复自己。 但其内容因 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

Answer 1

导出不会根据 redux 存储的内容而改变。 与其导出列表，不如尝试导出将语言映射到列表的 function。 例如：

// 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;

确保根据react-redux 文档将您的<App />包装在<Provider store={store}></Provider>中。