Redux:状态在连接期间为空

Question

也有类似的问题，但这些解决方案对我并不管用。我看不出我们的反应是什么在以下组件中，此部分失败(状态) => ({ component : 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作为一种“面向组件的”工作方式结束所有逻辑的单一存储后，我感到很难过。另外，当我们可以拥有组件继承时，为什么要使用"connect“实现(扩展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

通常的做法是创建一个单独的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函数将把存储的state对象连接到作为第一个参数传递的函数。类似地，您也可以对dispatcher函数执行同样的操作，使用ES6作为对象传递它们。然后将dispatch方法传递给第二个参数中的每个函数。