【问题标题】:Need some clarifications on some basic setup需要对一些基本设置进行一些说明
【发布时间】:2019-04-03 21:00:07
【问题描述】:

看了几个 Redux 教程后我还有几个问题:

  1. 创建我的store 后,我有:

    ReactDOM.render(, document.getElementById('root'));

    进入App 组件,我定义:

    function mapStateToProps(state) {
        return {
            posts: state.posts,
            comments: state.comments 
        }
    }
    
    function mapDispatchToProps(dispatch) {
        return bindActionCreators(actions, dispatch)
    }
    

    statedispatch 来自哪里?这是自动引用store 的状态和调度,因为我将它连接到我的组件?

  2. 我的一个 React 组件有一个表单,在提交时会调用一个函数:

    handleSubmit(event) { ... }
    

    所以在该组件的构造函数中,我有:

    constructor() {
        super()
        this.handleSubmit = this.handleSubmit.bind(this);
    }
    

    在声明 React 类组件时是否总是需要调用 super()? 为什么我需要在那里进行这种类型的绑定?

  3. 提交该表单后,我发送了一个名为addPost 的操作。 它是如何“去”减速机的?是否只是因为在我创建 store 并使用 mapDispatchToProps(dispatch) 时给出了 reducer,我“让”Redux 知道哪些操作可以分派给该 reducer?

  4. reducer 只返回一个state 对象。实际上将状态“保存”到存储中的逻辑在哪里?隐藏了吗?

【问题讨论】:

    标签: javascript reactjs redux


    【解决方案1】:
    1. 是的,将 statedispatch 分别视为对您的 redux 状态和调度函数的引用。

    2. React docs说:

      如果您不初始化状态并且不绑定方法,则不需要为您的 React 组件实现构造函数。

    为您的处理程序尝试箭头函数:

    class MyComponent extends Component {
        handleSubmit = () => {
            // ...
        }
    }
    
    1. reducer 被分配给了 store,store 被分配给 react-redux <Provider> 组件,Provider 组件提供了一个 React context,子组件中的调度动作被所述 reducer 拾取。

    2. 该逻辑在 redux 库中。

    【讨论】:

      【解决方案2】:
      1. 请查看我们的新official React-Redux docs。具体来说,您应该通读connect: Extracting Data with mapStateToPropsconnect: Dispatching Actions with mapDispatchToProps

      2. 如果你为一个类定义了一个constructor并且它扩展了另一个类,那么是的,你需要调用super()作为第一个构造函数的行 - 这就是 ES6 类的工作方式。

      3. Redux 只有一个 reducer 函数。 dispatch() 的内部是这样的:

        function dispatch(action) {
            newState = rootReducerFunction(oldState, action);
            subscriberCallbacks.forEach(callback => callback() );
        }
        

      您可能需要通读 Redux 文档中的 Structuring Reducers 页面,以更好地了解 reducer 通常如何以及为何拆分为更小的函数。

      1. 在大多数情况下,将不同“状态切片”重新组合在一起的逻辑在 combineReducers() 中,因为使用它来生成“root reducer”函数。

      【讨论】:

        【解决方案3】:

        状态和调度从何而来?自从我将它连接到我的组件后,这是否会自动引用商店的状态和调度?

        状态是最难理解的主题之一,当我们开始专注于 Redux 时,它就会出现在前面和中心位置。我们定义的每个基于类的组件都有自己的状态对象。

        mapStateToProps 是我们从应用程序级别状态到组件级别的接口能力。它是我们从状态对象中提取属性并将它们注入到我们的组件中的地方。

        dispatch 是您更改应用程序状态的方式,dispatch 是一个操作。

        在您的实现中,您正在使用bindActionCreators,它将值是动作创建者的对象转换为具有相同键的对象,但每个动作创建者都包装在dispatch调用中,因此可以直接调用它们.

        我个人从来没有以这种方式连接 redux 操作,所以我不得不查找这个。

        在声明 React 类组件时是否总是需要调用 super()?为什么我需要在那里进行这种类型的绑定?

        是的,React 组件总是必须在其构造函数中调用 super 才能正确设置。

        要深入了解这种绑定技巧,请从React docs 开始。如果你不是那么喜欢,只要知道在 React 中,每当你定义一个使用this 的事件处理程序时,你都需要将this.methodName = this.methodName.bind(this) 添加到你的constructor 函数中。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 2014-10-02
          • 1970-01-01
          • 2016-06-16
          • 2011-08-02
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多