javascript - 理解React-Redux和mapStateToProps（）(Understanding React-Redux and mapStateToProps())

Question

I'm trying to understand the connect method of react-redux, and the functions it takes as parameters.(我试图理解react-redux的连接方法，以及它作为参数所采用的函数。)

In particular mapStateToProps() .(特别是mapStateToProps() 。) The way I understand it, the return value of mapStateToProps will be an object derived from state (as it lives in the store), whose keys will be passed to your target component (the component connect is applied to) as props.(我理解它的方式， mapStateToProps的返回值将是一个从状态派生的对象（因为它存在于商店中），其键将作为道具传递给目标组件（应用组件连接）。) This means that the state as consumed by your target component can have a wildly different structure from the state as it is stored on your store.(这意味着目标组件所使用的状态与存储在商店中的状态可能具有完全不同的结构。) Q: Is this OK?(问：这样可以吗？)
Q: Is this expected?(问：这是预期的吗？)
Q: Is this an anti-pattern?(问：这是反模式吗？)   ask by Pablo Barría Urenda translate from so

Answer 1

Yes, it is correct.(是的，这是正确的。)

Its just a helper function to have a simpler way to access your state properties(它只是一个辅助函数，可以更简单地访问您的状态属性) Imagine you have a posts key in your App state.posts(想象一下，你的App state.posts有一个posts键) state.posts // /* { currentPostId: "", isFetching: false, allPosts: {} } */ And component Posts(和组件Posts) By default connect()(Posts) will make all state props available for the connected Component(默认情况下， connect()(Posts)将使所有状态道具可用于连接的Component) const Posts = ({posts}) => ( <div> {/* access posts.isFetching, access posts.allPosts */} </div> ) Now when you map the state.posts to your component it gets a bit nicer(现在，当您将state.posts映射到组件时，它会变得更好一些) const Posts = ({isFetching, allPosts}) => ( <div> {/* access isFetching, allPosts directly */} </div> ) connect( state => state.posts )(Posts) mapDispatchToProps(mapDispatchToProps) normally you have to write dispatch(anActionCreator())(通常你必须写dispatch(anActionCreator())) with bindActionCreators you can do it also more easily like(使用bindActionCreators你也可以更容易地做到这一点) connect( state => state.posts, dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch) )(Posts) Now you can use it in your Component(现在，您可以在Component中使用它) const Posts = ({isFetching, allPosts, fetchPosts, deletePost }) => ( <div> <button onClick={() => fetchPosts()} />Fetch posts</button> {/* access isFetching, allPosts directly */} </div> ) Update on actionCreators..(关于actionCreators的更新..) An example of an actionCreator: deletePost(actionCreator的一个示例： deletePost) const deletePostAction = (id) => ({ action: 'DELETE_POST', payload: { id }, }) So, bindActionCreators will just take your actions, wrap them into dispatch call.(因此， bindActionCreators将采取您的操作，将它们包装到dispatch调用中。) (I didn't read the source code of redux, but the implementation might look something like this:(（我没有阅读redux的源代码，但实现可能如下所示：) const bindActionCreators = (actions, dispatch) => { return Object.keys(actions).reduce(actionsMap, actionNameInProps => { actionsMap[actionNameInProps] = (...args) => dispatch(actions[actionNameInProps].call(null, ...args)) return actionsMap; }, {}) }