Question

我仍然对React / Redux构建中的数据流感到困惑。在我的应用程序中“工作”时我很舒服，但我无法弄清楚如何从服务器将数据传递到我的应用程序？

我有react-app.php文件和NSArray元素，这是我的应用程序的基本元素。我想传递一些产品的元素信息。

我该怎么做？

我想提供article#main-content prop productName，但我不知道如何从反应中访问它。

我的猜测来自减速机......但是怎么样？也许我不应该依赖article#main-content并传递变量以在article#main-content参数中做出反应？

反应-app.php

$_GET

App.js：

<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>

BoardProductContainer.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')
);

BoardProductComponent.js

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

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

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

BoardProductReducer.js

import React from 'react';

export default function () {
    return ();
}

Answer 1

您可以从

获取网址参数

this.props.location.query

例如：

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

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

传递$ _GET

以外的服务器变量

通常你会调用和动作一个ajax请求并在reducer中返回。

但是既然你从一开始就已经拥有了一个值，你可以做的就是将你的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

我通常会创建一个动作，具有以下流程：

Dispatch event {type：GETTING_DATA，status：IN_PROGRESS}。现在基于此，reducer可以修改状态，以便您可以显示微调器或您喜欢的任何元素，让用户知道正在加载数据。
对服务器执行AJAX请求并获取数据。
a）如果成功检索到数据，则调度事件{type：GETTING_DATA，status：SUCCESS}。 reducer现在可以更新状态，组件将重新渲染。
b）如果在检索数据时出现问题，则发送事件{type：GETTING_DATA，status：FAILED}。 reducer现在可以修改状态，以便用户知道发生了一些错误。

希望有所帮助！

Answer 3

我这样做的方式不同。当我在php中渲染我的页面时，我在html头中定义了全局javaScript变量 - 我使用的是刀片模板，所以我看起来像这样：

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

然后在我的app.js中我可以调用该变量：

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

然后将'orgUnitId'传递给我的reducer：

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

当我将{orgUnitId：orgUnitIdGlobal}作为第二个参数传递给我的createStore时，它在初始化组件时作为调用orgUnitId（state，action）的状态传递。

然后我可以从其他reducer那里引用那个值（我认为），然后编写我需要的API调用 - 比如getName reducer中的api.com/getname?orgUnitId=7 .......

React / Redux将道具传递给主要组件

3 个答案:

传递$ _GET

或者只是