Reduxの中にネストされたデータから単一のオブジェクトを取得 - Reactjs

Question

私はReduxの店でこのデータを持っている：

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のデータオブジェクトベースを1つだけ戻すには、データストア全体をオーバーライドしないでください。

ありがとうございました！

Answer 1

Reduxでは、アクションを使用して状態を更新および変更します。通常、データの取得には使用されません。これは、レデューサーによって返されたすべてのオブジェクトが新しいRedux状態として機能するため、FETCH_HEROES_REDUX_STOREがデータリストをオーバーライドする理由があります。

Reduxのネストされたデータから単一オブジェクトを取得するには、ReduxストアをReactコンポーネントにProvider react-reduxコンポーネントを渡したいとします。 Reduxのデータフローをよりよく理解するために、Reduxのドキュメントをご覧ください。http://redux.js.org/docs/basics/UsageWithReact.html

ほとんどのトップレベルコンポーネントでは、次の手順を実行してReactコンポーネントをReduxストアに接続します。これにより、ReactアプリケーションのすべてのコンテナコンポーネントでReduxストアを使用できるようになります。

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 

そして最後には、コンポーネントを反応させるのあなたにReduxの状態から単一のオブジェクトにアクセス：

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