javascript - 无法使用组合减速器 REACT 显示数据
问题描述
没有 redux 它可以工作,所以不是 api 连接问题
我有一个连接到代理的快速应用程序我已经设法在反应中显示我的数据,但现在我想在 redux soo 中制作它:
有我的问题,我已经做了所有的减速器/动作,存储和组合减速器,但我没有在我的页面中看到任何数据,我没有任何错误
有我的代码:
行动
export const api = ext => `http://localhost:8080/${ext}`;
//
// ─── ACTION TYPES ───────────────────────────────────────────────────────────────
//
export const GET_ADVERTS = "GET_ADVERTS";
export const GET_ADVERT = "GET_ADVERT";
//
// ─── ACTION CREATORS ────────────────────────────────────────────────────────────
//
export function getAdverts() {
return dispatch => {
fetch("adverts")
.then(res => res.json())
.then(payload => {
dispatch({ type: GET_ADVERTS, payload });
});
};
}
export function getAdvert(id) {
return dispatch => {
fetch(`adverts/${id}`)
.then(res => res.json())
.then(payload => {
dispatch({ type: GET_ADVERT, payload });
});
};
}
减速器
import { combineReducers } from "redux";
import { GET_ADVERTS, GET_ADVERT } from "../actions/actions";
const INITIAL_STATE = {
adverts: [],
advert: {}
};
function todos(state = INITIAL_STATE, action) {
switch (action.type) {
case GET_ADVERTS:
return { ...state, adverts: action.payload };
case GET_ADVERT:
return { advert: action.payload };
default:
return state;
}
}
const todoApp = combineReducers({
todos
});
export default todoApp;
index.js
//imports
const store = createStore(todoApp, applyMiddleware(thunk));
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById("app")
);
我的广告列表页面:
//imports..
class Adverts extends Component {
componentDidMount() {
this.props.getAdverts();
}
render() {
const { adverts = [] } = this.props;
return (
<div>
<Header />
<h1>Adverts</h1>
{adverts.map(advert => (
<li key={advert._id}>
<a href={"adverts/" + advert._id}>
{advert.name} {advert.surname}
</a>
</li>
))}
<Footer />
</div>
);
}
}
const mapStateToProps = state => ({
adverts: state.adverts
});
export default connect(
mapStateToProps,
{ getAdverts }
)(Adverts);
解决方案
我认为你的问题在这里:
function mapStateToProps(state) {
return {
**adverts: state.adverts**
};
}
如果您将 state.adverts 更改为state.todos.adverts ,它应该可以工作:
function mapStateToProps(state) {
return {
adverts: state.todos.adverts
};
}
因为你的 reducer 被称为 todos,它有状态 { adverts },这就是为什么你不能访问广告,即使它们被获取。
您可以在此处查看工作版本:https ://codesandbox.io/s/olqxm4mkpq
推荐阅读
- ios - Swift .xib 文件表格单元格
- java - 二进制搜索除以 4
- javascript - 如何删除函数中的 EventListener?
- openssl - ar: libcrypto.so: 安装 openssl-1.1.1g 时无法识别文件格式
- jquery - 如何在 jquery 中更改 django 日期格式?
- c++ - 如何重载具有相同类型的构造函数?
- elasticsearch - 如何将 ngram 分析器与 multi_match 一起使用
- javascript - 如果 FormValidation 的另一个特定字段不为空,如何要求一个字段不为空?
- animation - 如何使用 matplotlib 和赛璐珞放置动态图例
- javascript - 将 MongoDB 结果返回到 HTTP 请求