Javascript 如何从存储中的数组中获取单个元素

我正在尝试以我认为纯粹的

redux

方式实现一个应用程序。将数据从存储中取出，而不是通过道具

在下面的示例中，我不必向

List

组件传递道具。它使用

connect

从存储中提取

列表。但是我看不到任何不使用道具就可以将
元素
从
列表
中拉入
元素
组件的方法。有没有办法不用道具就可以做到这一点

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import {createStore} from 'redux'
import thunk from 'redux-thunk'
import {connect, Provider} from 'react-redux'

//Just return the same state
const testReducer = (state=null,{list}) => ({ ...state, list })

function testAction() {
    return {
        type: 'TEST',
        list: ['first','second']
    }
}


const store = createStore(testReducer, [thunk])

store.dispatch(testAction())

class List extends Component {

    render(){
        const {list} = this.props
        return(
            <div>
                {list.map((element) => {
                    return(<Element key={element} element={element} />)
                })}
            </div>
        )
    }
}

function mapStateToProps({list}){
    return( {
        list
    })
}

const ConnectList = connect(mapStateToProps)(List)

class Element extends Component {
    render(){
        const {element} = this.props
        return(
            <div>{element}</div>
        )
    }
}

ReactDOM.render(<Provider store={store}> 
                    <ConnectList />
                </Provider>, 
                document.getElementById('root')
);

import React，{Component}来自'React'；
从“react dom”导入react dom
从“redux”导入{createStore}
从“redux thunk”导入thunk
从“react redux”导入{connect，Provider}
//只需返回相同的状态
const testReducer=（state=null，{list}）=>（{…state，list}）
函数testAction（）{
返回{
类型：“测试”，
列表：[‘第一’，‘第二’]
}
}
const store=createStore（testReducer，[thunk]）
store.dispatch（testAction（））
类列表扩展组件{
render（）{
const{list}=this.props
返回(
{list.map（（元素）=>{
返回（）
})}
)
}
}
函数mapstatetops（{list}）{
报税表（{
列表
})
}
const ConnectList=connect（mapStateToProps）（列表）
类元素扩展组件{
render（）{
const{element}=this.props
返回(
{element}
)
}
}
ReactDOM.render（
, 
document.getElementById（'root'））
);
这是使用Redux将道具传递给组件的一种正确而常见的方法。在这里，您的主要想法是在存储中保存
列表
数据。您不能将此数据中的每个项目都保存在存储中，因此只有获取
列表
并通过prop将其项目映射到单独的组件中才是一种好方法

甚至，在Redux的文档中，他们在中使用了这个

consttodolist=（{todos，toggleTodo}）=>(

{todo.map（todo=>
toggleTodo（todo.id）}
/>
)}

)

这里TodoList通过另一个组件连接到存储。因此，它从存储和映射
Todo
组件中获取
Todo
，并使用
Todo
prop.
为什么您认为这不是使用Redux的正确方法？你们不可能从商店里买到所有的东西。在这里，您可以很好地从存储中获取您的
列表
，并将其元素传递给特定组件。这没有错，我明白你的意思。我甚至想不出还有别的办法。但我以前错了很多次。所以我想确认是的，也许还有其他的方法，但这是一个非常合适和常用的方法。你可以在很多应用程序中看到这种方法。我已经用Redux文档中的一个示例给出了答案。
const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)