javascript - 如何访问不同组件中的商店?
问题描述
所以我有一个搜索栏,我用 redux 存储查询,这似乎有效。我现在正试图在我将用来显示查询结果的结果组件中访问该查询。
我尝试使用 MapStateToProps,然后在我的结果组件中调用 {this.props.query},但这并没有从搜索栏中获取查询更改。
店铺创建:
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import { BrowserRouter } from "react-router-dom";
import { createStore, combineReducers, applyMiddleware } from "redux";
import { userReducer } from "./redux/reducers/user-reducer";
import { searchReduer } from "./redux/reducers/search-reducer"
import logger from "redux-logger";
import { Provider } from "react-redux";
const store = createStore(
combineReducers({
user: userReducer,
query: searchReducer,
}),
{},
applyMiddleware(logger)
);
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("root")
);
serviceWorker.unregister();
搜索:
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import TextField from '@material-ui/core/TextField';
import { connect } from "react-redux";
import elasticsearchUtility from "../utilities/elastic-search-utility";
const styles = theme => ({
container: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
flexDirection: 'row',
},
margin: {
margin: theme.spacing.unit,
},
cssLabel: {
color: 'white',
'&$cssFocused': {
color: 'white',
},
},
cssFocused: {
},
cssUnderline: {
color: 'white',
},
cssOutlinedInput: {
'&$cssFocused $notchedOutline': {
borderColor: 'white',
},
},
notchedOutline: {
borderWidth: '1px',
borderColor: 'white !important'
},
});
class Search extends Component{
state = {
searchQuery: ""
};
componentDidMount() {
elasticsearchUtility.startClient();
}
onChange = event => {
this.props.updateQuery(event.target.value);
};
render() {
const {searchQuery, classes} = this.props;
return (
<div className={this.props.classes.container}>
<TextField
fullWidth={true}
className={classes.margin}
InputLabelProps={{
classes: {
root: classes.cssLabel,
focused: classes.cssFocused,
},
}}
InputProps={{
classes: {
root: classes.cssOutlinedInput,
focused: classes.cssFocused,
notchedOutline: classes.notchedOutline,
},
}}
onChange={this.onChange}
label="Service search"
variant="outlined"
id="custom-css-outlined-input"
value={searchQuery}
/>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
query: state.searchQuery
}
};
const mapDispatchToProps = (dispatch) => {
return {
updateQuery: (query) => {
dispatch(search(query))
}
}
};
function search(value) {
return {type: "SEARCH", value};
}
Search.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(
connect(
mapStateToProps,
mapDispatchToProps
)(Search)
);
搜索结果:
import React, {Component} from 'react';
import connect from "react-redux/es/connect/connect";
class SearchResults extends Component {
render() {
console.log(this.props.query);
return (
<div>
<h1>Test + {this.props.query}</h1>
</div>
);
}
}
function mapStateToProps(state) {
return { query: state.searchQuery };
}
export default connect(mapStateToProps)(SearchResults)
搜索减少器:
export const initialQuery = '';
export const searchReducer = (state = initialQuery, action) => {
switch (action.type) {
case "SEARCH":
return action.value;
default:
return state;
}
};
在搜索结果中,{this.props.query} 始终未定义,即使我在搜索栏中输入文本时可以看到 state.query 发生变化。我假设我对 Redux 有一些误解,但我不确定是什么,因为我能够在我的“搜索”组件中正确更新 searchQuery。
解决方案
看起来你在几个地方混在一起query
了。searchQuery
combineReducers({
user: userReducer,
query: searchReducer,
}),
您正在设置state.query
为全局查询对象,但你们俩都mapStateToProps
在尝试访问state.searchQuery
.
此外,在Search
的渲染中,您有const {searchQuery, classes} = this.props;
,但同样,mapStateToProps
映射state.searchQuery
到props.query
,因此props.searchQuery
未定义。
似乎您只需要确保使用正确的映射,或者选择其中一个,query
或者searchQuery
在全局状态和道具中使用它。
推荐阅读
- bash - Vagrant 在配置中将文件添加到 PATH 不起作用
- sql-server - SQL Server 2016 over 2008 R2 不支持的内容
- php - 如何在 PHP 中的二维数组中打印特定值,这不完全是二维的?
- condor - HTCondor Scatter Gather
- python - 如何通过输入框 tkinter Python 输入/使用浮点数?
- csv - 在读取 csv 文件时,Redshift Spectrum 可以处理用双引号括起来的字段后的尾随空格吗?
- scala - 区分 AVRO 联合类型
- php - PHP | LDAP | AD 中的实时搜索
- json - 将对话式 AI 连接到 Alexa
- angular - Angular Rest API 调用返回 401 Unauthorized