Question

有类似的问题，但是解决方案对我不起作用。我看不到我们指示React-Redux在状态上赋予一些价值的地方。在以下组件中，该部分失败（状态）=>（{成分：state.ingredients}）。原因：状态未定义

import React from 'react';
import { connect } from 'react-redux'

class Ingredients extends React.Component {

    render() {
        return (
            <div>Ingredients</div>
        );
    }
}

export default connect(
    (state) => ({ ingredients: state.ingredients }),  //This fails!
    (dispatch) => ({ 
        createNew: () => dispatch(actions.createNew()), 
        edit: (id) => dispatch(actions.edit(id)) 
    })
)(Ingredients);

商店只是有：

function AppStore(state, action) {
        return { 
            ingredients: { foo: "bar" } 
        };
    }
}

export default AppStore;

没有办法清空配料

商店通过以下方式绑定到应用程序：

var appStore = createStore(AppStore);

ReactDOM.render((
    <BrowserRouter>
        <Provider store={appStore}>
            <Route component={App} />
        </Provider>
    </BrowserRouter>
), document.getElementById('root'));

App组件只是一个视图，其中包含我确实需要使用redux的组件（成分）：

class App extends React.Component {
    render() {
        return (
            <div>
                <Header/>
                <Switch>
                    <Route path='/home' component={Home} />
                    <Route path='/recipes' component={Recipes} />
                    <Route path='/ingredients' component={Ingredients} />
                    <Route render={() => <div>Not found!</div>} />
                </Switch>
                <Footer />
            </div>
    );
  }

“成分”组件是我文章开头的组件。我觉得这种Redux魔术缺少了一些东西，或者真的违反直觉。

“成分”成分如何知道“状态”的值？它在哪里注入组件？ Redux如何知道要向哪个组件注入状态？

我遵循了不同的教程，在所有这些教程中，我只能看到对createStore进行了校准，然后将其分配给标签，然后使用“连接”来导出组件。对我来说，这种设置是否也很正常？首先，在接受React作为“面向组件”的工作方式以结束所有逻辑存储在单个存储中之后，我感到很难过。另外，我质疑为什么“连接”实现，当我们可以拥有组件继承时（扩展Redux.ConnectedComponent或类似的东西呢？）……那么，所有这些神奇的设置……也许我应该尝试其他事情而不是Redux？

编辑：将连接部分更改为：

function mapStateToProps(state) {
    return { ingredients: state.ingredients };
}

function mapDispatchToProps(dispatch) {
    return {
        createNew: () => dispatch(actions.createNew()), 
        edit: (id) => dispatch(actions.edit(id)) 
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(Ingredients);

此更改（我认为只是重新排序的语法），状态未定义

编辑2： 我的错，我正在将另一家商店导入此处显示的商店如果导入正确的状态，状态将不再是不确定的

Answer 1

常见的做法是创建一个单独的U函数，该函数返回一个对象，为要在组件中用作mapStateToProps的每个redux状态定义一个键值对。

这将大大简化您的prop逻辑。

connect

connect函数会将商店的import React from 'react'; import { connect } from 'react-redux' class Ingredients extends React.Component { render() { return ( <div>{this.props.ingredients.foo}</div> ); } } const mapStateToProps = (state) => { return { ingredients: state.ingredients } } export default connect(mapStateToProps, { createNew, edit })(Ingredients)对象挂接到作为第一个参数传递的函数。同样，您可以对调度程序功能执行相同的操作，使用ES6将它们作为对象传递。然后，state方法将传递给第二个参数中的每个函数。

React-Redux：连接期间状态为空

1 个答案: