理解React-Redux和mapStateToProps（）

作者: Little it
发布时间: 2024-12-31 05:22:48 (14天前)
转自：

8 条回复

0#
回复此人
甲基蓝 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> import React from 'react'; import {connect} from 'react-redux'; import Userlist from './Userlist'; class Userdetails extends React.Component{ render(){ return( <div> <p>Name : <span>{this.props.user.name}</span></p> <p>ID : <span>{this.props.user.id}</span></p> <p>Working : <span>{this.props.user.Working}</span></p> <p>Age : <span>{this.props.user.age}</span></p> </div> ); } </code> </pre> <P> } </p> <pre> <code> function mapStateToProps(state){ *state is your redux-store object* return { user:state.activeUser } </code> </pre> <P> } </p> <pre> <code> export default connect(mapStateToProps)(Userdetails); </code> </pre> </DIV>

编辑
1#
回复此人
757461156 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 用于描述mapstateToProps的bolerplate： </p> <P> //这是Redux容器所做的大大简化的实现 </p> <pre> <code> class MyComponentContainer extends Component { mapStateToProps(state) { // this function is specific to this particular container return state.foo.bar; } render() { // This is how you get the current state from Redux, // and would be identical, no mater what mapStateToProps does const { state } = this.context.store.getState(); const props = this.mapStateToProps(state); return <MyComponent {...this.props} {...props} />; } } </code> </pre> <P> 接下来 </p> <pre> <code> function buildReduxContainer(ChildComponentClass, mapStateToProps) { return class Container extends Component { render() { const { state } = this.context.store.getState(); const props = mapStateToProps(state); return <ChildComponentClass {...this.props} {...props} />; } } } </code> </pre> </DIV>

编辑
2#
回复此人
木木 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 问： <code> Is this ok? </code> <BR/> 答：是的 </p> <P> 问： <code> Is this expected? </code> <BR/> 是的，这是预期的（如果您使用react-redux）。 </p> <P> 问： <code> Is this an anti-pattern? </code> <BR/> 答：不，这不是反模式。 </p> <P> 它被称为“连接”您的组件或“使其变得聪明”。这是设计的。 </p> <P> 它允许您将组件与状态分离一段时间，从而增加代码的模块性。它还允许您将组件状态简化为应用程序状态的子集，这实际上可以帮助您遵守Redux模式。 </p> <P> 以这种方式思考：商店应该包含 <EM> 整个 </EM> 申请状态。 <BR/> 对于大型应用程序，这可能包含嵌套多层深层的许多属性。 <BR/> 你不想在每次通话时都花费这么多（昂贵的）。 </p> <P> 没有 <code> mapStateToProps </code> 或者其中的某些类似物，你会想要用另一种方式来改变你的状态以提高性能/简化。 </p> </DIV>

编辑
3#
回复此人
北极星微控 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 是的，这是正确的。它只是一个辅助函数，可以更简单地访问您的状态属性 </p> <P> 想象一下，你有一个 <code> posts </code> 在你的应用程序中键入 <code> state.posts </code> </p> <pre> <code> state.posts // /* { currentPostId: "", isFetching: false, allPosts: {} } */ </code> </pre> <P> 和组件 <code> Posts </code> </p> <P> 默认情况下 <code> connect()(Posts) </code> 将使所有状态道具可用于连接的组件 </p> <pre> <code> const Posts = ({posts}) => ( <div> {/* access posts.isFetching, access posts.allPosts */} </div> ) </code> </pre> <P> 现在当你映射了 <code> state.posts </code> 对你的组件来说它会变得更好一些 </p> <pre> <code> const Posts = ({isFetching, allPosts}) => ( <div> {/* access isFetching, allPosts directly */} </div> ) connect( state => state.posts )(Posts) </code> </pre> <P> 的<strong> mapDispatchToProps </强> </p> <P> 通常你必须写 <code> dispatch(anActionCreator()) </code> </p> <P> 同 <code> bindActionCreators </code> 你也可以更容易地做到这一点 </p> <pre> <code> connect( state => state.posts, dispatch => bindActionCreators({fetchPosts, deletePost}, dispatch) )(Posts) </code> </pre> <P> 现在，您可以在Component中使用它 </p> <pre> <code> const Posts = ({isFetching, allPosts, fetchPosts, deletePost }) => ( <div> <button onClick={() => fetchPosts()} />Fetch posts</button> {/* access isFetching, allPosts directly */} </div> ) </code> </pre> <H2> 关于actionCreators的更新.. </H2> <P> actionCreator的一个示例： <code> deletePost </code> </p> <pre> <code> const deletePostAction = (id) => ({ action: 'DELETE_POST', payload: { id }, }) </code> </pre> <P> 所以， <code> bindActionCreators </code> 只会采取你的行动，包装他们 <code> dispatch </code> 呼叫。（我没有阅读redux的源代码，但实现可能如下所示： </p> <pre> <code> const bindActionCreators = (actions, dispatch) => { return Object.keys(actions).reduce(actionsMap, actionNameInProps => { actionsMap[actionNameInProps] = (...args) => dispatch(actions[actionNameInProps].call(null, ...args)) return actionsMap; }, {}) } </code> </pre> </DIV>

编辑
4#
回复此人
与之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 你得到了第一部分： </p> <P> 是 <code> mapStateToProps </code> 将Store状态作为参数/参数（由...提供） <code> react-redux::connect </code> ）和它用于链接组件与存储状态的某些部分。 </p> <P> 通过链接我的意思是返回的对象 <code> mapStateToProps </code> 将在施工时作为道具提供，任何后续更改将通过 <code> componentWillReceiveProps </code> 。 </p> <P> 如果你知道观察者设计模式，它就是它的那个或小变化。 </p> <P> 一个例子将有助于使事情更清楚： </p> <pre class="lang-js prettyprint-override"> <code> import React, { Component, } from 'react-native'; class ItemsContainer extends Component { constructor(props) { super(props); this.state = { items: props.items, //provided by connect@mapStateToProps filteredItems: this.filterItems(props.items, props.filters), }; } componentWillReceiveProps(nextProps) { this.setState({ filteredItems: this.filterItems(this.state.items, nextProps.filters), }); } filterItems = (items, filters) => { /* return filtered list */ } render() { return ( <View> // display the filtered items </View> ); } } module.exports = connect( //mapStateToProps, (state) => { items: state.App.Items.List, filters: state.App.Items.Filters, //the State.App & state.App.Items.List/Filters are reducers used as an example. } // mapDispatchToProps, that's another subject )(ItemsContainer); </code> </pre> <P> 可以有另一个反应成分叫做 <code> itemsFilters </code> 处理显示并将过滤器状态保持为Redux Store状态，Demo组件正在“监听”或“订阅”Redux Store状态过滤器，因此每当过滤器存储状态更改时（借助于 <code> filtersComponent </code> ）react-redux通过向其发送更改来检测是否存在更改并通知或“发布”所有侦听/订阅组件 <code> componentWillReceiveProps </code> 在这个例子中，由于反应状态已经改变，因此将触发物品的重新过滤并刷新显示。 </p> <P> 如果这个例子令人困惑或不够清楚，无法提供更好的解释，请告诉我。 </p> <P> 至于： <EM> 这意味着目标组件所使用的状态与存储在商店中的状态可能具有完全不同的结构。 </EM> </p> <P> 我没有得到问题，但只知道反应状态（ <code> this.setState </code> ）与Redux Store状态完全不同！ </p> <P> 反应状态用于处理反应组分的重绘和行为。反应状态仅包含在组件中。 </p> <P> Redux Store状态是Redux reducer状态的组合，每个状态都负责管理一小部分app逻辑。可以在帮助下访问这些reducers属性 <code> react-redux::connect@mapStateToProps </code> 任何组件！这使得Redux存储状态可以访问应用程序范围，而组件状态是独有的。 </p> </DIV>

编辑
5#
回复此人
取之 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 这个 <a href="https://facebook.github.io/react/" rel="noreferrer"> 应对 </A> ＆安培; <a href="http://redux.js.org/" rel="noreferrer"> 终极版 </A> 例子是基于Mohamed Mellouki的例子。但验证使用 <a href="https://www.npmjs.com/package/js-prettify" rel="noreferrer"> 美化 </A> 和 <a href="http://www.javascriptlint.com/" rel="noreferrer"> 掉毛规则 </A> 。请注意，我们定义了道具和 <a href="http://redux.js.org/docs/api/Store.html#dispatch" rel="noreferrer"> 调度 </A> 方法使用 <a href="https://facebook.github.io/react/docs/typechecking-with-proptypes.html" rel="noreferrer"> PropTypes </A> 这样我们的编译器就不会对我们尖叫。这个例子还包括Mohamed中缺少的一些代码行例。要使用连接，您需要从中导入 <a href="http://redux.js.org/" rel="noreferrer"> 反应-终极版 </A> 。这个例子也 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="noreferrer"> 结合 </A> filterItems这个方法会阻止 <a href="https://www.w3schools.com/js/js_scope.asp" rel="noreferrer"> 范围 </A> 问题该 <a href="https://facebook.github.io/react/docs/react-component.html" rel="noreferrer"> 零件 </A> 。此源代码已使用JavaScript自动格式化 <a href="https://www.npmjs.com/package/js-prettify" rel="noreferrer"> 美化 </A> 。 </p> <pre> <code> import React, { Component } from 'react-native'; import { connect } from 'react-redux'; import PropTypes from 'prop-types'; class ItemsContainer extends Component { constructor(props) { super(props); const { items, filters } = props; this.state = { items, filteredItems: filterItems(items, filters), }; this.filterItems = this.filterItems.bind(this); } componentWillReceiveProps(nextProps) { const { itmes } = this.state; const { filters } = nextProps; this.setState({ filteredItems: filterItems(items, filters) }); } filterItems = (items, filters) => { /* return filtered list */ }; render() { return <View>/*display the filtered items */</View>; } } /* define dispatch methods in propTypes so that they are validated. */ ItemsContainer.propTypes = { items: PropTypes.array.isRequired, filters: PropTypes.array.isRequired, onMyAction: PropTypes.func.isRequired, }; /* map state to props */ const mapStateToProps = state => ({ items: state.App.Items.List, filters: state.App.Items.Filters, }); /* connect dispatch to props so that you can call the methods from the active props scope. The defined method `onMyAction` can be called in the scope of the componets props. */ const mapDispatchToProps = dispatch => ({ onMyAction: value => { dispatch(() => console.log(`${value}`)); }, }); /* clean way of setting up the connect. */ export default connect(mapStateToProps, mapDispatchToProps)(ItemsContainer); </code> </pre> <P> 此示例代码是组件起始位置的良好模板。 </p> </DIV>

编辑
6#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 的<strong> 反应 - 终极版 </强> <code> connect </code> 用于更新每个操作的存储。 </p> <pre> <code> import { connect } from 'react-redux'; const AppContainer = connect( mapStateToProps, mapDispatchToProps )(App); export default AppContainer; </code> </pre> <P> 它在这里非常简单明了地解释了 <a href="http://blog.tylerbuchea.com/super-simple-react-redux-application-example/" rel="nofollow noreferrer"> 博客 </A> 。 </p> <P> 您可以克隆github项目或复制粘贴该博客中的代码以了解Redux连接。 </p> </DIV>

编辑

登录后才能参与评论