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

我正试图用我认为纯粹的方式实现一个应用程序 redux 方式。将数据从存储区中拉出,而不通过道具。

在下面的示例中,我不必将道具传递给 List 组件。它拉动 list 从商店使用 connect . 但我看不出有什么办法 element 来自 列表 存储到 Element 不使用道具的组件。有没有一种方法可以做到这一点而不需要通过管道道具?

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')
);