时间戳

首页 > 解决方案 > 如何从存储中的数组中获取单个元素

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

问题描述

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

在下面的示例中，我不必将道具传递给List组件。它list使用connect. 但是我看不到任何不使用道具element从list商店拉入组件的方法。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')
);

标签： javascriptreactjsreduxreact-redux

解决方案

这是使用 Redux 将 props 传递给组件的一种正确且常见的方式。在这里，您的主要想法是list在您的商店中保存数据。你不能在 store 中保存这个数据中的每个项目，所以只有list通过 prop 获取并将其项目映射到单独的组件是一个好方法。

甚至，在 Redux 的文档中，他们在Todo 应用示例中使用了这个。

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

这里 TodoList 通过另一个组件连接到 store。所以它是从带有proptodos的 store 和 mappingTodo组件中获取的。todo

推荐阅读