Question

我正在使用redux技术，并且对函数连接的理解很固执，因为我之前见过的函数带有参数等，而这个函数至少不带任何东西，看起来像那样（代码运行良好，我只是无法理解功能的想法）

import React from "react"
import { connect } from "react-redux"

const mapStateToProps = state => {
  return { root: state.root }
}

const ConnectedList = root => {
  console.log(root)
  return (
    <ul className="list-group list-group-flush">
      {root.root.articles.map(el => {
        return (
          <li className="list-group-item" key={el.id}>
            {el.title}
          </li>
        )
      })}
    </ul>
  )
}

const List = connect(mapStateToProps)(ConnectedList)

export default List

Answer 1

它采用您的mapStateToProps函数，就像您所说的那样-它怎么不带任何参数？您已经通过了。

https://react-redux.js.org/api/connect

它还带有其他参数：

mapDispatchToProps
mergeProps
options

（如文档中所详细说明的那样，它还会列出类型，如果这正是您真正要问的，但由于未标记TypeScript，并且代码中没有TypeScript，因此不清楚您来自何处）

connect（在这种情况下）采用一个参数，即一个函数，该函数将Redux状态映射到组件的属性。

connect然后返回您用组件ConnectedList调用的函数。

这称为Higher-Order Component (HOC)，它不过是一个组件（或类似组件的功能），该组件使用执行“事物”的代码包装您的组件，然后呈现您的组件。

在这种情况下，HOC会采用您在mapStateToProps函数中指定的Redux状态，并将该状态（作为道具）发送到您要呈现的组件。

source code for connect显示了它是如何工作的，尽管我怀疑这会有点不透明，直到您对JS和React更加熟悉为止。

const f = f1 => f2 => f1(f2)
const g1 = fn => { fn(); console.log(1) }
const g2 = () => console.log(2)
f(g1)(g2)

或更相关的术语：

const customConnect = aMappingFn => aComponent => aMappingFn(aComponent)

const yourMapper    = fn => { console.log(1); fn() }
const yourComponent = () => console.log(2)

customConnect(yourMapper)(yourComponent)

Answer 2

connect()函数将React组件连接到Redux存储。

它不会修改传递给它的组件类。而是返回一个新的，已连接的组件类，该类包装了您传入的组件。

定义

connect函数自动从store获取数据，并将其作为props向下传递到connected component。当store中的数据更改时，传递的props也会更改，并且该组件会自动变为re-rendered。酷！

要在容器中使用商店，您需要做两件事：

首先：使用mapStateToProps()。顾名思义，它将状态变量从商店映射到您指定的道具。

第二：您需要将这些道具连接到您的容器。这就是connect()出现的地方。 mapStateToProps组件返回的对象已连接到容器。

您可以像

那样从react-redux导入连接

import {connect} from 'react-redux';

您可以找到详细的文档here

代码示例

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

class App extends React.Component {
  render() {
    return <div>{this.props.store_data}</div>;
  }
}

function mapStateToProps(state) {
  return { store_data: state.appData };
}

export default connect(mapStateToProps)(App);

Answer 3

这称为currying。它是一种功能编程范例，可以帮助您抽象出重复的逻辑。 connect函数基本上是一个返回函数的函数，这意味着您可以将参数传递给其他函数。这是一篇很棒的中级文章，将进一步详细介绍。

https://medium.com/javascript-scene/curry-and-function-composition-2c208d774983

Redux函数'connect（mapStateToProps）（ConnectedList）'的名称（类型）是什么

3 个答案: