- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一个 react 应用程序,它使用 redux thunk 获取数据,并在安装应用程序时将其设置为主组件的全局状态,然后我有一个子组件,其中填写了一个表单,然后我想根据更新状态此表单中的输入,然后重定向到另一个更新了全局状态的组件。
主要成分是这样的:
mainComponent.js
import React, { Component } from 'react';
import {Routes, Route, Navigate, useParams, useNavigate} from 'react-router-dom'; //Switch changed to routes Also redirect is changed to Navigate since version 6
import {connect} from 'react-redux';
import { useLocation } from 'react-router-dom';
import Store from './store-components/StoreComponent';
import {fetchProducts} from '../redux/ActionCreators';
// --------Hook to use withRouter from v5 in actual v6-----------------
export const withRouter = (Component) => {
const Wrapper = (props) => {
const navigate = useNavigate();
const location = useLocation();
const params = useParams();
return (
<Component
navigate={navigate}
location={location}
params={params}
{...props}
/>
);
};
return Wrapper;
};
const mapStateToProps = (state) => {
return{
products: state.products,
}
}
const mapDispatchToProps = dispatch => ({
fetchProducts: () => { dispatch(fetchProducts())},
});
class Main extends Component {
componentDidMount() {
this.props.fetchProducts();
}
render(){
return (
<div>
<Header/>
<Routes>
<Route path = "/login" element = {<LoginComponent/>}/>
<Route path="/home" element={<Home products={this.props.products}/>}/>
<Route exact path="/store" element= {<Store products={this.props.products} />} />
<Route path="*"element={<Navigate to="/home" />} />
{/* Instead of redirect the above is needed to redirect if there is no matched url*/}
</Routes>
<Footer location={this.props.location}/>
</div>
);
}
};
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Main));
和获取产品的 reducer :
ActionCreator.js
import * as ActionTypes from './ActionTypes';
import { baseUrl } from '../shared/baseUrl';
// -------------------------- products--------------------------------
//-- products thunk
export const fetchProducts = () => (dispatch) => {
dispatch(productsLoading(true));
return fetch(baseUrl +'products')
.then(response => {
if (response.ok){
return response;
}
else{
var error = new Error('Error '+response.status+': '+response.statusText)
error.response = response;
throw error;
}
},
error =>{
var errmess=new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(products => dispatch(addProducts(products)))
.catch(error => dispatch(productsFailed(error.message)));
}
// thunk
// this is something I tried to solve my problem but is not working
export const fetchProductsBuscador = (param) => (dispatch) => {
dispatch(productsLoading(true));
return fetch(baseUrl +'products'+'/'+param)
.then(response => {
if (response.ok){
return response;
}
else{
var error = new Error('Error '+response.status+': '+response.statusText)
error.response = response;
throw error;
}
},
error =>{
var errmess=new Error(error.message);
throw errmess;
})
.then(response => response.json())
.then(products=> dispatch(addProducts(products)))
.catch(error => dispatch(productsFailed(error.message)));
}
我要更新状态的表单所在的组件是
Finder.js
import React, {Component} from 'react';
//this is a service to use navigate in this class component in order to redirect to the //component i want to render the updated state
import { withNavigate } from '../../services/withNavigate';
import { Navigate } from 'react-router-dom';
import { connect } from 'react-redux';
import {fetchProductsBuscador} from '../../redux/ActionCreators';
// this component will be used to search for a product
// the user will select the type of product, marca, linea, modelo,
// the server will handle the search and return the products that match the search criteria by using query parameters
// so the first input will be the tipo, so when the user selects a tipo, the server will return the marcas that are available for that tipo
// then the user will select a marca, and the server will return the lineas that are available for that marca
function toTitleCase(str) {
return str.replace(/\w\S*/g, function(txt){
return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
});
}
const mapStateToProps = (state) => {
return{
products: state.products,
}
}
const mapDispatchToProps = dispatch => ({
fetchProductsBuscador: (param) => { dispatch(fetchProductsBuscador(param))},
});
class Finder extends Component {
constructor(props){
super(props);
this.state = {
tipo: '',
marca: '',
linea: '',
marcaDropdown: [],
lineaDropdown: [],
modeloDropdown: [],
modeloInput: '',
// the url will be updated with the new values
url: baseUrl+'buscaproduct'
};
// bind the functions handlers to the constructor to make them available
this.handleSubmit = this.handleSubmit.bind(this);
this.handleInputChange = this.handleInputChange.bind(this);
}
handleSubmit(event){
event.preventDefault()
// redirect to the store component with the search criteria
// the search criteria will be passed as query parameters
var tipo = this.state.tipo
var marca = toTitleCase(this.state.marca)
var linea = this.state.linea
this.props.fetchProductsBuscador('/?tipo=' + tipo + '&marca=' + marca + '&linea=' + linea)
.then((response)=>{
this.props.navigate('/store',{
state:{
products:response.data
}
})
}).catch((error)=>{
console.log(error)
});
}
// this function will handle the input change
// when a type is selected, the marca will be updated and the url will be updated,
// an async call will be made to the server to get the marcas that are available for that tipo
// then the marca will be updated with the data from the server
// and the url will be updated with the new marca
// and so on
handleInputChange(event){
const target = event.target;
const value = target.value;
const name = target.name;
this.setState({
[name]: value
});
// if the user selects a tipo, then the marca will be updated with the marcas that are available for that tipo
// and the url will be updated with the new marca
if(name === 'tipo'){
axios.get(baseUrl+'buscavehiculo/?tipo=' + value)
.then((response) => {
this.setState({
marcaDropdown: response.data
});
console.log('marcas',response.data);
})
.catch((error) => {
console.log(error);
});
}
// if the user selects a marca, then the linea will be updated with the lineas that are available for that marca
// and the url will be updated with the new linea
if(name === 'marca'){
axios.get(baseUrl+'buscavehiculo/?tipo=' +this.state.tipo + '&marca=' + value)
.then((response) => {
this.setState({
lineaDropdown: response.data
});
})
.catch((error) => {
console.log(error);
});
}
}
render(){
return(
// HERE IS the form i suppose is not needed to show as this just give the values of //above
);
}
}
export default withNavigate(connect(mapStateToProps,mapDispatchToProps) (Finder));
我尝试的另一种方法是在 handleSubmit
中使用 axios:
handleSubmit(event){
event.preventDefault()
// redirect to the store component with the search criteria
// the search criteria will be passed as query parameters
var tipo = this.state.tipo
var marca = toTitleCase(this.state.marca)
var linea = this.state.linea
axios.get(baseUrl+'products' + '/?tipo=' + tipo + '&marca=' + marca + '&linea=' + linea )
.then((response) => {
console.log('response.data',response.data)
this.props.navigate("/store",{
state:{
products:response.data
}
});
})
.catch((error) => {
console.log(error)
})
}
上面的代码可以重定向,但是渲染的数据是第一次安装应用程序时用 redux thunk 获取的数据,而不是用 axios 更新的数据,axios 完成了获取过滤数据的工作,但无法更新状态和使用redux 方法我得到了错误
Uncaught TypeError: can't access property "then", this.props.fetchProductsBuscador(...) is undefined
我如何更新状态,以便当我在 handleSubmit 中重定向时,只呈现我想要的和在表单中过滤的数据,而不是第一次获取的数据?
最佳答案
除非您使用的是从未更新到 React 16.8 的 2019 年之前的代码库,否则请不要编写类组件,也请不要使用 connect
和 mapStateToProps
。< br/>类组件是遗留 API,connect
的存在只是为了与这些组件向后兼容。
如今,您应该使用 useSelector
和 useDispatch
Hook ,并且您应该在所有需要它的组件中使用它们 - 分派(dispatch) Action 之间没有区别在父组件或子组件中 - 只需在任何需要的地方分派(dispatch)一个操作,并在任何需要的地方使用 useSelector
订阅存储值。
综上所述,您可能还在使用一种非常过时的 Redux 风格,即使您没有在此处展示它:现代 Redux 不使用带有 switch
语句的手写 reducer和 ACTION_TYPE
字符串常量。 createSlice
会为您处理所有这些。
此外,您不需要像在此处那样手动编写获取逻辑,RTK Query 会为您处理该部分 - 并且“意外”它也会在此处处理您的问题 - 您的缓存条目将由过滤器,当您使用不同的过滤器重新安装原始组件时,它不会首先显示旧值。
一般来说,我强烈建议您阅读 why Redux Toolkit is how to use Redux today然后关注the official Redux Tutorial因为您所关注的资源似乎已经过时三年多了。
关于javascript - REACT - REDUX 如何更新子组件中 redux 应用程序的全局状态,子组件在安装应用程序时在父组件中获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/74838691/
我一直在尝试将 redux sagas 和 redux 工具包引入我的项目。我目前遇到的问题是 watcher saga 没有捕捉到 takeEvery 中的调度 Action 。效果并运行处理程序。
我需要使用 deep-freeze 库来深度卡住 react redux 应用程序中的整个 redux 状态,以检查状态是否有任何变化。我应该如何使用 deep-freeze 和 React redu
这是一个关于 Redux js 中状态的问题。我在该州有一个数组列表: { list: list } 根据 Redux 文档,我不应该修改 reducer 中的状态。我想在列表中添加一个新项目。我
我正在构建一个应用程序,在用户向下滚动时执行操作。如果我可以在用户再次向上滚动时撤消这些操作,基本上将滚动变成浏览操作时间线的一种方式,那就太好了。 Redux 中是否有内置的方法来做到这一点?或者我
从我从 Dan Abramov 的蛋头视频“javascript-redux-colocating-selectors-with-reducers”和他的一些推文中了解到,使用选择器将状态映射到 Pr
尝试使用 redux saga 运行 reduxdevtools: 收到此错误: Error Before running a Saga, you must mount the Saga middle
Redux 工具包文档提到在多个 reducer 中使用操作(或者更确切地说是操作类型) First, Redux action types are not meant to be exclusive
Redux 将调度状态更改的操作。 redux 中 Action 类型的命名约定是什么? 最佳答案 社区中有一些约定,我将在这里列出我知道并认为有用的约定: 最常见的约定是 将 Action 类型(“
使用 Redux Toolkit 可以吗,即使我只在其中创建 Slice 并通过 Redux Saga 解决中间件问题? 或者在这种情况下,最佳实践是使用 Redux Saga + raw Redux
Redux 如何处理深度嵌套的叶子模型变更?意思是,我正在从叶子一直发送到它的 reducer 句柄的更改事件,并且我不想将更改事件广播到整个树。 最佳答案 在 Redux 中,所有操作总是被分派(d
redux 使用什么类型的数据结构来使数据在 Angular 和 React.js 中持久化?我假设它使用持久数据结构。 最佳答案 Redux 是一种用于管理状态的架构。它不使用任何数据结构。它保留您
我们正在计划一个 Electron 应用程序,并且我们正在考虑 Redux。该应用程序将具有巨大 状态,可能会从数十个或数百个文件中读取数据。在做一些了解 Redux 的研究时,我发现 reducer
我不想添加属性 sections: []到我的对象 formOpen在 reducer 中,我收到我的对象 formOpen从我的服务器和其他属性,我想添加这个,我该怎么做? 谢谢 import {
我使用 redux-saga 的主要原因之一是它进行异步函数调用的可测试性。我的困境是,当我使用不属于我的 redux 存储的有状态对象进行编程时,使用 sagas 进行编程变得非常尴尬。是否有使用非
我是 redux 的新手,所以我有几个问题希望得到解答。如果您能解释一些有关构建 redux 架构的内容,那就太好了。 此时我使用 Flutter_Redux 包 ( https://pub.dart
我正在使用 React + Flux。我们的团队正计划从 flux 转向 redux。来自 Flux 世界的我对 Redux 感到非常困惑。在 flux 控制流中很简单,从组件 -> 操作 -> 存储
这个问题与过去不同,这就是为什么。这个问题是什么时候。由于两者本身都是很好的框架,所以问题是我什么时候应该使用 thunk 而不是 saga。因为我的一位 friend 一直坚持让我在我们的应用程序中
我搜索了高低,但找不到明确的答案。 我已经设法绕开 Redux 的机制,但是当我谈到 API 调用和异步操作创建者时,我被 Promises 上下文中的中间件所困。 你能帮我把乱七八糟的东西弄好吗?
我正在使用 redux-saga 但遇到了一个问题:redux-auth-wrapper 需要 redux-thunk进行重定向,所以我只是在我的商店中添加了 thunk: import {creat
问题(tl;博士) 我们如何创建 custom redux-orm reducer与 redux-toolkit的createSlice ? 有没有比这个问题中提供的尝试更简单、推荐、更优雅或只是其他
我是一名优秀的程序员,十分优秀!