react 中的 redux 和react-redux的区别分析

Posted 2023-04-06

参考技术A 参考资料：

1、 React-Redux 的用法 - 阮一峰网络日志

2、 react-redux 官方文档

3、 redux和react-redux小记

项目总结：

1、入口文件添加（将store数据暴露给所有子组件）

2、子组件使用

（1）通过connect 声明式获取global参数

（2）、直接通过props进行使用

3、使用react-redux来管理状态之后，页面中的this.state 就没必要使用，这时当 页面状态改变后是如何改变state的？

（1）、首先如果想改变页面状态，就必须有一个用户的操作行为action

（2）、通过props.dispatch操作回调事件，将action 的type、payload参数传递过去

（3）、在定义好的reducer中进行操作响应，改变数据状态

注意update方法的引入

注意：

此时最重要的是glodal.ts需要在store.ts中引入，而store.ts同时也需要引入到入口文件index.tsx中，传入store，实现所有子组件都可以调用到全局的store中的变量。

react-redux 中的 ref 和 node 指的是啥？

【中文标题】react-redux 中的 ref 和 node 指的是啥？

【英文标题】：What does ref and node refer to in react-redux?react-redux 中的 ref 和 node 指的是什么？

【发布时间】：2016-12-26 01:10:23

【问题描述】：

我正在从 docs 学习 react-redux，但看不到下面的意思。 ref 部分指的是什么？和节点？从我看到的任何地方都没有使用这个参考。 ref 是否在渲染后引用 DOM 上的子组件节点（输入）？如果是这样，为什么不直接引用输入？

import React from 'react'
import  connect  from 'react-redux'
import  addTodo  from '../actions'

let AddTodo = ( dispatch ) => 
  let input

  return (
    <div>
      <form onSubmit=e => 
        e.preventDefault()
        if (!input.value.trim()) 
          return
        
        dispatch(addTodo(input.value))
        input.value = ''
      >
        <input ref=node => 
          input = node
         />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )

AddTodo = connect()(AddTodo)

export default AddTodo

【参考方案1】：

这是一个ref callback attribute，其目的是获得对 DOM 元素/类组件的“直接访问”。使用 ref 可以focus 输入框，直接获取它的值或者访问类组件的方法。

在这种情况下，它的目的是通过分配对输入变量（let input）的引用来获取/更改输入的值 - 请参阅代码中的 cmets。

let AddTodo = ( dispatch ) => 
  let input // the input variable which will hold reference to the input element

  return (
    <div>
      <form onSubmit=e => 
        e.preventDefault()
        if (!input.value.trim())  // using the input variable
          return
        
        dispatch(addTodo(input.value)) // using the input variable
        input.value = ''
      >
        <input ref=node => 
          input = node // assign the node reference to the input variable
         />
        <button type="submit">
          Add Todo
        </button>
      </form>
    </div>
  )

【讨论】：

如果我不想使用 refs，我是否能够在某处传递调度函数并使用 onChange 作为输入触发它？

如果你只想要redux store中的值，你可以这样做——<input onChange= (e) => dispatch(addTodo(e.target.value)) 。

那么使用 refs 有什么好处呢？

@mangocaptain 的好处是您可以通过参考访问表单提交的输入。您将如何访问表单提交时的输入？

在输入上使用 ref 是在 react-redux 应用程序上接受输入的最佳实践吗？