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减速.....