我试图理解react-redux的连接方法,以及它作为参数的函数。特别是mapStateToProps()。
我理解它的方式,mapStateToProps的返回值将是一个从状态派生的对象(因为它存在于存储中),它的键将作为道具传递给您的目标组件(组件连接被应用到)。
这意味着目标组件使用的状态可能与存储在存储库中的状态具有完全不同的结构。
问:这样可以吗? 问:这是预期的吗? 问:这是反模式吗?
我试图理解react-redux的连接方法,以及它作为参数的函数。特别是mapStateToProps()。
我理解它的方式,mapStateToProps的返回值将是一个从状态派生的对象(因为它存在于存储中),它的键将作为道具传递给您的目标组件(组件连接被应用到)。
这意味着目标组件使用的状态可能与存储在存储库中的状态具有完全不同的结构。
问:这样可以吗? 问:这是预期的吗? 问:这是反模式吗?
当前回答
是的,你可以做到。您甚至还可以处理状态并返回对象。
function mapStateToProps(state){
let completed = someFunction (state);
return {
completed : completed,
}
}
如果您想将与状态相关的逻辑从呈现函数转移到它的外部,这将非常有用。
其他回答
It's a simple concept. Redux creates a ubiquitous state object (a store) from the actions in the reducers. Like a React component, this state doesn't have to be explicitly coded anywhere, but it helps developers to see a default state object in the reducer file to visualise what is happening. You import the reducer in the component to access the file. Then mapStateToProps selects only the key/value pairs in the store that its component needs. Think of it like Redux creating a global version of a React component's
this.state = ({
cats = [],
dogs = []
})
不可能通过使用mapStateToProps()来改变状态的结构。您所做的只是选择组件需要的存储键/值对,并将值(从存储中的键/值列表中)传递给组件中的道具(本地键)。在列表中,每次只执行一个值。在此过程中不会发生结构更改。
附注:商店是本地的。reducer通常也将状态传递给数据库,与Action creator一起混合,但首先要理解这个简单的概念。
P.P.S.将每个减速器分离到单独的文件中,并且只导入组件需要的减速器,这是一个很好的做法。
是的,你可以做到。您甚至还可以处理状态并返回对象。
function mapStateToProps(state){
let completed = someFunction (state);
return {
completed : completed,
}
}
如果您想将与状态相关的逻辑从呈现函数转移到它的外部,这将非常有用。
React-Redux连接用于更新每个操作的存储。
import { connect } from 'react-redux';
const AppContainer = connect(
mapStateToProps,
mapDispatchToProps
)(App);
export default AppContainer;
这篇博客里解释得非常简单明了。
你可以克隆github项目或复制粘贴从博客的代码来理解Redux连接。
我想对你提到的发言进行调整,即:
这意味着您的目标组件所使用的状态可以 与存储时的状态有很大不同的结构 你的商店
可以说,目标组件使用的状态有一小部分状态存储在redux存储区中。换句话说,组件使用的状态是redux存储区状态的子集。
就connect()方法的理解而言,它相当简单!Connect()方法可以向组件添加新道具,甚至覆盖现有道具。通过这个connect方法,我们也可以访问由Provider抛出给我们的redux存储的状态。两者的结合对您有利,您可以将redux存储的状态添加到组件的道具中。
以上是一些理论,我建议你看一遍这个视频来更好地理解语法。
This react & redux example is based off Mohamed Mellouki's example. But validates using prettify and linting rules. Note that we define our props and dispatch methods using PropTypes so that our compiler doesn't scream at us. This example also included some lines of code that had been missing in Mohamed's example. To use connect you will need to import it from react-redux. This example also binds the method filterItems this will prevent scope problems in the component. This source code has been auto formatted using JavaScript Prettify.
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);
这个示例代码是一个很好的模板,可以作为组件的起点。