React.js / Redux：功能组件，遗留 state/props 我是否必须连接使用商店的每个组件？

Question

关于 React.js 和 Redux 的一些问题：

功能组件是否也可以利用商店和其中保存的状态？例如，可能与 useEffect()?
一般来说，我可以将多个reducer组合成一个rootReducer，然后createStore(rootReducer)用它，然后把它传给一个用它包裹我的Component的Provider Component，这样store应该在我的整个应用程序中全局可用，对吗？
对于每个想要使用商店/状态的组件，我是否总是必须为每个组件从 react-redux 导入 2 个方法 mapStateToProps() 和 mapDispatchToProps()组件然后连接它们？或者我也可以在某些 top-level 组件上执行此操作并在我的所有组件中全局使用 redux，就像问题 2) 中的商店提供商一样？
最后一个问题：我是否仍然可以在我的组件中使用 this.state 属性或并行使用它们作为附加（例如对于此组件孤立状态）然后得到this.state.someState 像往常一样从这个状态获得道具，或者当我已经使用 Redux 时这不再可能了吗？以同样的方式，我是否仍然可以使用/传递 props 到我的组件并从我的组件中读取它们，或者现在一切都只由状态管理？（或者将道具传递给我的 children 与 Redux 无关）？

Answer 1

1) 是的功能组件可以利用商店。可以说它更清晰易读，因为 props 可以立即被解构。

const MyComponent = ({ auth }) => {
    const [display, setDisplay] = useState(false)

    useEffect(() => {
       if(auth.user){
          setDisplay(true)
       }
    }, [auth.user])    


    return(
       <div>
          { display ? "Content": "Please sign in" }
       </div>
    )
}

const mapStateToProps = (state) => {
   return{
      auth: state.auth
   }
}

export default connect(mapStateToProps)(MyComponent)

2) 没错。您还可以使用 combineReducers()，这在某些方面更易于阅读。

import { createStore, combineReducers } from "redux"
import authReducer from "./reducers/authReducer"
import postReducer from "./reducers/postReducer"

const store = createStore(combineReducers({
    auth: authReducer,
    post: postReducer
}))

export default store

然后导入商店，将您的 App.js 包装在 Provider 中，并为其提供该商店的道具。

3) 通常，如果您希望您的组件可以直接访问商店，那么在每个组件中使用 connect() 是一种公认的模式。您决定使用 mapStateToProps() 还是 mapDispatchToProps() 完全取决于该组件需要做什么。不需要两者都使用，您可以在 connect().

中定义一个或另一个

import React, { useState } from "react"
import { addPost } from "/actions/postActions"
import { connect } from "react-redux"

const Form = ({ addPost }) => {
   const [text, setText] = useState("")

   const handleSubmit = (e) => {
      e.preventDefault()
      addPost(text)
   }

   return(
     <form onSubmit={handleSubmit}>
        <input value={text} onChange={(e) => setText(e.target.value)}/>
     </form>
   )
}

const mapDispatchToProps = (dispatch) => {
   return {
     addPost: (text) => dispatch(addPost(text))
   }
}


export default connect(null, mapDispatchToProps)(Form)

4) 您现在可能已经注意到，在组件的上下文中，redux-state 存储为 props。它们是完全不同且孤立的数据流。所以 state 保持不变并由组件本身控制。即使您的组件已连接到商店，您仍然可以自由使用 this.state.dog 之类的方法。这是component-state和redux-state之间的隔离。

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

class MyDogs extends React.Component{
   state = {
     dog: "Tucker"
   }

   render(){
     return(
       <div>
          Component State Value: {this.state.dog} //Tucker
          Redux State Value: {this.props.dog} //Buddy
       </div>
   )
}

const mapStateToProps = (state) => {
   return { 
      dog: state.dog
   }
}

export default connect(mapStateToProps)(MyDogs)

React.js / Redux：功能组件，遗留 state/props 我是否必须连接使用商店的每个组件？

React.js / Redux: Functional Components, legacy state/props and do I have to connect every component that uses the store?

components

reactjs

redux

react-redux

react-props