获取从嵌套数据单个对象在终极版 - Reactjs

我有这个数据，我的终极版商店：获取从嵌套数据单个对象在终极版 - Reactjs

data: [ 
    0: { 
     name: "Mark Zuckerburg", 
     description: "Facebook CEO" 
    }, 
    1: { 
     name: "Sheryl Sandberg", 
     description: "Facebook COO" 
    }, 
    2: { 

    } 
]

这里的是我在减速代码：

// This is how I store my data lists 
case GET_HEROES_SUCCESS: { 
      return Object.assign({}, state.data, { 
       data: action.data 
      }); 
     } 
// This is how I fetch currently the single object in the data lists. 
case FETCH_HEROES_REDUX_STORE: { 
      return { ...state, data: state.data[action.id] } 
     }

我现在的问题是，如果我派遣FETCH_HEROES_REDUX_STORE它覆盖了我商店中的所有数据列表。如何通过不覆盖整个数据存储来仅返回action.id上的单个数据对象库。

谢谢！

来源

2017-02-19 Sydney Loteria

在Redux中，操作用于更新和修改状态。它们通常不用于获取数据。这是因为Reducer返回的任何对象都会作为新的Redux状态来使用，这就是FETCH_HEROES_REDUX_STORE覆盖数据列表的原因。

要从Redux中的嵌套数据中获取单个对象，您希望使用Provider react-redux组件将Redux存储区传递给您的React组件。我鼓励您查看Redux文档以更好地理解Redux中的数据流：http://redux.js.org/docs/basics/UsageWithReact.html。

在您的最顶层组件中，执行以下操作将您的React组件连接到Redux存储。这使Redux存储可用于React应用程序中的所有Container组件。

import React from 'react' 
import { render } from 'react-dom' 
import { Provider } from 'react-redux' 
import { createStore } from 'redux' 
import todoApp from './reducers' 
import App from './components/App' 

let store = createStore(todoApp) 

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

然后，要将Redux状态树传递给React组件，可以将Container组件连接到Redux。注意：您想在React应用程序的某个位置渲染此容器组件。

import { connect } from 'react-redux' 
import ReactComponent from './react_component' // import a React component 

const mapStateToProps = (state) => { 
    return { 
    heroes: state.data // this will return the heroes data directly into your React components so you don't need to fetch it 
    } 
} 

export default connect(mapStateToProps)(ReactComponent) // decorate React component with Redux state

最后，来自终极版国家访问单个对象在你的阵营组成：

import React from 'react'; 

const ReactComponent = ({ heroes }) => { 

    console.log(heroes) // will log the redux state tree 

    const markZuckerburg = heroes.data[0] // will log {name: "Mark Zuckerburg", description: "Facebook CEO"} 
    const sherylSandberg = heroes.data[1] // will log {name: "Sheryl Sandberg", description: "Facebook COO"} 

    return (
    <div> {markZuckerburg.name} </div> 
    <div> {sherylSandberg.name} </div> 
) 
} 

export default React Component

来源

2017-02-19 20:50:26

获取从嵌套数据单个对象在终极版 - Reactjs

回答

相关问题