我的redux存在问题。这是我第一次在React中使用它。我成功地使用它来记录和注册用户。但是,我有一个在后端创建的对象数组,我正在使用axios获取。 Axios记录数据,我的动作创建者也将数据记录在有效负载中。但是,它不会更新我的新状态。我不知道我做错了什么,因为我尝试的方式与我的登录和注册状态完全相同,但这些只是布尔值。我用谷歌搜索并寻找解决方案。我尝试映射新数组,Object.assign和许多其他人,但我似乎无法让它工作。在状态中创建新数组有什么特别的方法吗?或者我可以将它分配给action.payload?我感谢所有的帮助
// store.js
import { applyMiddleware, createStore } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import reducer from './reducers/reducer';
const middleware = applyMiddleware(logger, thunk);
export default createStore(reducer, middleware);
// rootReducer.js
import { combineReducers } from 'redux';
import registerReducer from './registerReducer';
import loginReducer from './loginReducer';
import productsReducer from './products';
export default combineReducers({
registerReducer,
loginReducer,
productsReducer
});
// productsReducer //我相信这里肯定是错的
import { SHOW_PRODUCTS, SELECT_PRODUCT } from '../actions/products';
const initialState = {
productsList: []
};
const productsReducer = (state = initialState, action) => {
switch (action.type) {
case SHOW_PRODUCTS:
return {...state, productsList: action.payload}
}
return state;
}
export default productsReducer;
// actions.js
import { SHOW_PRODUCTS, SELECT_PRODUCT } from './constants';
export function showProducts(products) {
return {
type: SHOW_PRODUCTS,
payload: products
};
}
// component.js
import React, { Component } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import ProductsList from './ProductsList';
import { showProducts } from '../actions/products';
class Home extends Component {
constructor(props) {
super(props);
}
componentWillMount() {
this.props.getProducts();
}
render() {
return(
<div>Home Page
<ProductsList />
</div>
)
}
}
const mapStateToProps = (state) => {
return {
productsList: state.productsReducer.productsList
};
}
const mapDispatchToProps = (dispatch) => {
return {
getProducts: () => {
axios.get('http://localhost:5000/product/list')
.then((res) => {
console.log(res.data);
dispatch(showProducts(res.data))
})
.catch(err => console.log(err))
}
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Home);
我还使用我的redux记录器包含了一个图像链接。
https://i.stack.imgur.com/bTnYh.png
这里可能是一个非常小的,愚蠢的错误,因为我对React很新,而且对Redux来说是全新的
答案 0 :(得分:1)
你有一个错误,我不知道你是否是一个短信,但在productsReducer.js
constants
actions
constants
来自import { SHOW_PRODUCTS, SELECT_PRODUCT } from '../actions/constants'; // <- from constants instead
const initialState = {
productsList: []
};
const productsReducer = (state = initialState, action) => {
switch (action.type) {
case SHOW_PRODUCTS:
return {...state, productsList: action.payload}
}
return state;
}
export default productsReducer;
时应该来自reducer
:
case
因此undefined
{{1}}实际上不应该是{{1}},因为它是{{1}},因此会返回初始状态。
答案 1 :(得分:0)
我相信mapStateToProps
你想要做以下事情:
const mapStateToProps = (state) => {
return {
productsList: state.productsList
};
}
要确认传递productsList
,您是否可以添加一个简单的循环到render
component.js
函数,如下所示:
render() {
const { productsList } = this.props;
return(
<div>
Home Page
{productsList.map((product, index) => (
<div key={index}>{product.PROPERTY_NAME_HERE}</div>
))}
</div>
)
}
答案 2 :(得分:0)
我用减速机做的方式是
import { SHOW_PRODUCTS, SELECT_PRODUCT } from '../actions/products';
const initialState = {
productsList: []
};
const productsReducer = (state = initialState, action) => {
switch (action.type) {
case SHOW_PRODUCTS:
let nextState = {...state};
nextState.productsList = action.payload
return nextState;
}
return state;
}
export default productsReducer;
答案 3 :(得分:0)
尝试这种方式:
componentWillMount() {
this.getProducts();
}
getProducts() {
axios.get('http://localhost:5000/product/list')
.then((res) => {this.props.showProducts(res.data);})
.catch(err => console.log(err));
}
const mapDispatchToProps = dispatch => ({
showProducts: (data) => {
dispatch(showProducts(data));
},
});