Преобразование учебника Redux React в React Native

Question

В настоящее время я следую этому учебному пособию от создателей Redux для внедрения управления состоянием в мой проект React Native.

В настоящее время я застрял, потому что я не уверен, как имитировать рендеринг списка и строк в нем.

Вот один элемент рендеринга из учебника:

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={ {
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

и вот мой эквивалент

const StockItem = ({ onClick, SOH, TradeName }) => (
    <TouchableOpacity
        onPress={onClick}
        style={{...styles.stockItem, textDecorationLine: SOH >= 2? 'none' : 'line-through' }}
    >
        {TradeName}
    </TouchableOpacity>
);

Теперь я попытался выполнить тот же процесс с самим списком, но я не уверен, как именно я это делаю с аналогом React Native; Вот их фрагмент кода для рендеринга:

const TodoList = ({ todos, onTodoClick }) => (
  <ul>
    {todos.map((todo, index) => (
      <Todo key={index} {...todo} onClick={() => onTodoClick(index)} />
    ))}
  </ul>
)

А вот и моя попытка:

const StockList = ({ stock, onStockClick }) => (
    <FlatList
        styles={{flex: 1}}
        data={stock}
        renderItem={StockItem}
        keyExtractor={(stock, StockID) => StockID.toString()}
    />
);

Я не уверен, как правильно следовать тем же принципам, которые Redux передает с отображением списка React Native. Я довольно новичок в React Native и Redux, поэтому я хочу следовать этому уроку Redux, чтобы правильно составить идею избыточности из людей, которые его создали, поэтому я бы хотел достичь этого