React/Redux將道具傳遞給主要組件

Question

對於React/Redux構建中的數據流，我還是很困惑。當我在「我的應用程序」中工作時，我感覺相當舒適，但我無法弄清楚如何將數據從服務器傳遞到我的應用程序？

我有反應-app.php文件與article#main-content元素，這是我的應用程序的基本元素。我想傳遞一些產品的元素信息。

我該怎麼做？

我想給支持productName，但我不知道如何從反應中訪問它。

我的猜測是來自reducer ......但是如何？也許我不應該信賴article#main-content並通過變量在$_GET參數中作出反應？

反應-app.php

<link rel="stylesheet" type="text/css" href="/lines-configurator/build/style.css" media="screen"/> 
<script async type="text/javascript" src="/lines-configurator/build/bundle.js"></script> 

<article id="main-content" productName="My Product"> 
</article> 

App.js：

import React from 'react'; 
import {render} from 'react-dom'; 
import {createStore} from 'redux'; 
import {Provider} from 'react-redux'; 
import reducer from './reducers/index'; 

import BoardConfig from './containers/BoardConfigContainer'; 
import BoardProduct from './containers/BoardProductContainer'; 

const store = createStore(reducer, window.devToolsExtension && window.devToolsExtension()); 

render(
    <Provider store={store}> 
     <div> 
      <BoardConfig /> 
      <BoardProduct /> 
     </div> 
    </Provider>, 
    document.getElementById('main-content') 
); 

BoardProductContainer.js

import {connect} from 'react-redux'; 
import BoardProduct from '../components/BoardProductComponent'; 

export default connect(
    function mapStateToProps(state) { 
     return { 

     }; 
    }, 
    function mapDispatchToProps(dispatch) { 
     return {}; 
    } 
)(BoardProduct); 

BoardProductComponent.js

import React from 'react'; 

export default function() { 
    return(); 
} 

個

BoardProductReducer.js

import * as types from '../constants/constants'; 
import Immutable from 'immutable'; 

const initialState = Immutable.Map({}); 

export default function boardReducer(state = initialState, action) { 
    switch (action.type) { 
     default: 
      return state; 
    } 
} 

Answer 1

您可以從

this.props.location.query 

防爆得到URL參數：

// http://localhost:3000/?test=1 

console.log(this.props.location.query); 
/* 
{ 
    test: "1" 
} 
*/ 

---

傳遞服務器瓦爾除了$ _GET

通常你會打電話和行動使AJAX請求並返回到減速器中。

但既然你已經有一個值從一開始，你可以做的是包裝您的App.js的代碼在start功能

export default function start(serverVar) { 
    // use serverVar here: 
    const store = createStore(reducer, window.devToolsExtension && window.devToolsExtension()); 

    render(
     <Provider store={store}> 
      <div> 
       <BoardConfig /> 
       <BoardProduct /> 
      </div> 
     </Provider>, 
     document.getElementById('main-content') 
    ); 
} 

更改您的WebPack的輸出包括：

library: 'Foo' 

在HTML文件中加入：

<script type="text/javascript"> 
    Foo.start('<?php echo $serverVar; ?>'); 
</script> 

或者乾脆

忽略所有上面的設置，只是這樣做

<script type="text/javascript"> 
    window.someValue = '<?php echo $serverVar; ?>'; 
</script> 

Answer 2

我通常會創建一個動作，具有以下流程：

• 調度事件{類型：GETTING_DATA，狀態：IN_PROGRESS}。現在基於此，縮減器可以修改狀態，以便您可以顯示一個微調器或您喜歡的任何元素，以讓用戶知道數據正在加載。

• 對服務器執行AJAX請求並獲取數據。

• a）調度事件{類型：GETTING_DATA，狀態：SUCCESS}如果數據成功檢索。 Reducer現在可以更新狀態，並且組件將重新渲染。

• b）如果在檢索數據時出現問題，調度事件{類型：GETTING_DATA，狀態：FAILED}。減速器現在可以修改狀態，以便用戶知道發生了一些錯誤。

希望幫助！

Answer 3

我這樣做是不同的。我定義的HTML頭全局JavaScript變量，當我渲染我的網頁在PHP - 我使用的是刀模板，所以我的是這樣的：

var orgUnitIdGlobal = {!! json_encode($orgUnitId, JSON_FORCE_OBJECT) !!}; 

然後在我的app.js我就可以在變量調用：

var elementId = 'appRoot'; 
 
if (document.getElementById(elementId)) { 
 
\t let store = createStore(reducer,{ 
 
\t \t orgUnitId : orgUnitIdGlobal 
 
\t }); 
 
\t ReactDOM.render(
 
\t \t <Provider store={store}> 
 
\t \t \t <MyComponent /> 
 
\t \t </Provider>, 
 
\t \t document.getElementById(elementId) 
 
\t) 
 
}

的 'orgUnitId'，然後通過傳遞給我的減速器：

import orgUnitId from './orgUnitId.js' 
...other reducers for other parts of the state... 
export default combineReducers({ 
    orgUnitId, 
...other reducers.... 
}) 

並且當我將{orgUnitId：orgUnitIdGlobal}作爲第二個參數傳遞給我的createStore時，它將作爲狀態在組件初始化時調用orgUnitId（狀態，動作）。

那麼我可以指的是價值（我認爲）從其他減速器，並作出什麼都API調用我需要 - 像api.com/getname?orgUnitId=7中的getName減速.....