Question

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

功能组件也可以利用存储及其中保存的状态吗？例如，可能与useEffect()之类的React钩子结合使用？
通常，我可以将多个reducer组合到一个rootReducer和createStore(rootReducer)上，然后将其传递给使用我的Component进行包装的Provider Component，这样，存储应该是全局可用的在我的整个应用中，对吗？
对于每个要使用存储/状态的组件，我是否总是需要从react-redux中为每个组件导入2个方法mapStateToProps()和mapDispatchToProps()，然后将它们连接起来？还是我也可以在某些顶级组件上执行此操作，并通过商店提供商在全球所有组件中使用redux，例如问题2）？
最后一个问题：我是否仍可以在我的组件中使用this.state属性，或者将它们并行地用作附加项（例如，对于该组件隔离状态），然后像往常一样从该状态获取道具this.state.someState，还是在我已经使用Redux时不再可能？并且以同样的方式，我是否仍可以将prop传递给我的组件并从我的Components中读取它们，还是现在仅由状态管理一切？（或者将道具传递给我的孩子与Redux无关）？

Answer 1

1）是，功能组件可以利用存储。它可以说更清晰易读，因为道具可以立即变形。

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包装在提供程序中，并为其提供该商店的道具。

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：功能组件，遗留状态/属性，我是否必须连接使用商店的每个组件？

1 个答案: