reactjs - react/redux 应用程序:未调度到存储的操作
问题描述
我正在使用 redux 创建一个用于状态管理的反应应用程序,我在尝试调度和操作时遇到问题,操作在 redux devtools 中显示,但它没有将数据存储到 redux 存储不知道它为什么会发生,非常不寻常
如果有人知道为什么会这样,请告诉我
我的组件在下面
import axios from "axios";
import React, { Component } from "react";
import { connect } from "react-redux";
import { SETDATA } from "./store";
class Hello extends Component {
constructor() {
super();
this.state = {
data: [],
};
}
componentDidMount() {
this.firstdispatch();
}
firstdispatch = () => {
axios.get("https://jsonplaceholder.typicode.com/users").then((r) => {
console.log("data fetched", r.data);
this.props.setdata(r.data);
});
};
render() {
return (
<div>
{" "}
fff
{/* <button onClick={this.props.setdata}>getdata</button>
<button onClick={this.props.removedata}>decriment</button> */}
{/* <button onClick={props.push}>push</button>
<button onClick={props.pop}>pop</button> */}
{console.log(this.props)}
{this.props.users &&
this.props.users.map((m, i) => (
<div key={i}>
{m.title} {` - - - -`} {m.email}
</div>
))}
</div>
);
}
}
const mapstatetoprops = (state) => {
return {
users: state.users.users || [],
};
};
const mapDispatchTopProps = (dispatch) => {
return {
setdata: (users) => {
dispatch({ type: SETDATA, users });
},
};
};
export default connect(mapstatetoprops, mapDispatchTopProps)(Hello);
Actions reducers 和 store 更新如下
import * as redux from "redux";
import thunk from "redux-thunk";
import { composeWithDevTools } from "redux-devtools-extension";
export const SETDATA = "users";
export const DELETEDATA = "data/deletedata";
const initSst = {
users: [],
};
const users = (state = initSst, action) => {
switch (action.type) {
case SETDATA:
return { ...state, ...action.data };
case DELETEDATA:
return { data: null };
default:
return state;
}
};
const rootReducer = redux.combineReducers({
users,
});
const store = redux.createStore(
rootReducer,
composeWithDevTools(
redux.applyMiddleware(thunk)
// other store enhancers if any
)
);
export default store;
解决方案
只需更新"SETDATA"
到SETDATA
switch/case
case SETDATA:
return { ...state, ...action.data };
推荐阅读
- java - 如何将随机 int 变成可以在 Java 中使用和比较的变量?
- reactjs - CSRF 令牌不匹配 - 使用 React 0.13
- java - 迭代器 hasNext 用于获取最后一条记录
- swift - Xcode 说应用程序正在运行,但在我的 iOS 14 设备上找不到应用程序
- python - 如何比较子列表python中的元素?
- python - django-import-export 将列附加到导入的 .xlsx
- regex - 正则表达式检测重复
- python-3.x - 菜鸟可怕地卡在最有可能是一个简单的问题上
- checkbox - 当值相同的vuejs时,多个复选框不起作用
- html - 表格未正确对齐