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

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 被调用，然后将其分配给一个标签，然后使用“connect”来导出组件。我也对这种设置感到非常不舒服，这正常吗？ 首先，在接受 React 作为一种“面向组件”的工作方式以结束将所有逻辑都放在一个存储中之后，我感觉很糟糕。另外，我质疑为什么“连接”实现，当我们可以拥有组件继承时（扩展 Redux.ConnectedComponent 或类似的东西呢？）......然后，所有这些神奇的设置......也许我应该尝试其他东西而不是还原？

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

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

通常的做法是创建一个单独的 mapStateToProps 函数来返回一个对象，为您希望在组件中以 prop 提供的每个 redux 状态定义一个键值对。

这将大大简化您的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)

connect 函数会将 store 的 state 对象与作为第一个参数传递的函数挂钩。类似地，您可以对调度程序函数执行相同的操作，使用 ES6 将它们作为对象传递。然后 dispatch 方法在第二个参数中传递给每个函数。