React + Redux不更新商店
问题描述:
我正在使用React和Redux进行电话列表,并且遇到问题。 应该预料到的是:用户将他的数据放在模态表单中,当他点击Submit按钮时 - onClick函数触发器和数据分派到Redux存储区,然后从存储区转到localStorage,在那里存储所有数据。React + Redux不更新商店
问题:不是创建一个包含存储数据的对象的数组,而是创建了空数组。在下一次点击提交按钮后 - 第一次点击放入数据而不是空数组。继续下去。
与普通React setState有相同的问题。
代码:
应用:
import React from "react";
import { Input } from "../components/Input";
import { Table } from "../components/Table";
import { ButtonAdd } from "../components/ButtonAdd";
import { connect } from "react-redux";
import { setInput, setUser, setFormModalStatus, setSuccessModalStatus} from
"../actions/dataActions";
class App extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.openFormModal = this.openFormModal.bind(this);
this.closeFormModal = this.closeFormModal.bind(this);
this.openSuccessModal = this.openSuccessModal.bind(this);
this.closeSuccessModal = this.closeSuccessModal.bind(this);
}
openFormModal() {
this.props.setFormModalStatus(true);
}
closeFormModal() {
this.props.setFormModalStatus(false);
}
openSuccessModal() {
this.props.setSuccessModalStatus(true);
}
closeSuccessModal() {
this.props.setSuccessModalStatus(false);
}
handleSubmit(e) {
this.closeFormModal();
this.openSuccessModal(); //this is for modals
const datas = this.props.form.input.values //{name: 'Rick', tel: 12345}
this.props.setUser(datas); //making dispatch with data
console.log(this.props.data.users); // [] - the issue
const testData = {name: Josh, tel: 54321};
this.props.setUser(testData);
console.log(this.props.data.users); //[{name: 'Rick, tel: 12345}]
e.preventDefault();
this.props.form.input.values = '';
}
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-12 col-md-10 col-md-offset-1">
<div className="box">
<Input input={this.props.input}/>
<ButtonAdd
formModalStatus=
{this.props.data.formModalStatus}
successModalStatus=
{this.props.data.successModalStatus}
openFormModal={this.openFormModal}
closeFormModal={this.closeFormModal}
closeSuccessModal={this.closeSuccessModal}
handleSubmit={this.handleSubmit}
/>
</div>
<Table />
</div>
</div>
</div>
);
}
}
const mapStateToProps = (state) => {
return {
data: state.data,
form: state.form
};
};
const mapDispatchToProps = (dispatch) => {
return {
setInput: (input) => {
dispatch(setInput(input));
},
setUser: (user) => {
dispatch(setUser(user));
},
setFormModalStatus: (boolean) => {
dispatch(setFormModalStatus(boolean));
},
setSuccessModalStatus: (boolean) => {
dispatch(setSuccessModalStatus(boolean));
}
};
};
export default connect(mapStateToProps, mapDispatchToProps)(App);
减速机:
const dataReducer = (state = {
input: "",
users: [],
formModalStatus: false,
successModalStatus: false
}, action) => {
switch (action.type) {
case "SET_INPUT":
state = {
...state,
input: action.payload
};
break;
case "SET_USER":
state = {
...state,
users: [...state.users, action.payload]
};
break;
case "SET_FORM_MODAL_STATUS":
state = {
...state,
formModalStatus: action.payload
}
case "SET_SUCCESS_MODAL_STATUS":
state = {
...state,
successModalStatus: action.payload
}
}
return state;
};
export default dataReducer;
Appropriane行动:
export function setUser(user) {
return {
type: "SET_USER",
payload: user
};
}
答
如果你能在WebpackBin什么提供工作示例,那个ld帮助更好地调试问题。
从我的经验来看,这通常发生在状态发生变异时。你可以尝试使用你的减速以下格式:
state = {
state.set('users', [...state.users, action.payload])
};
现有的功能变异的存在状态在state=...
state = {
...state,
users: [...state.users, action.payload]
};
PS:还有,你少在最后两个动作break
声明你的减速器中的情况。而你的default
案例
答
你不应该直接在React或Redux中改变状态。使用Redux时,您希望始终返回一个新对象来替换之前的状态。
也许尝试这样的事情呢?
switch (action.type) {
case 'SET_INPUT':
return {
...state,
input: action.payload
};
case 'SET_USER':
return {
...state,
users: [...state.users, action.payload]
};
case 'SET_FORM_MODAL_STATUS':
return {
...state,
formModalStatus: action.payload
};
case 'SET_SUCCESS_MODAL_STATUS':
return {
...state,
successModalStatus: action.payload
};
default:
return state;
}
感谢您的回答。 当我尝试你的变体 - 控制台@ state.set中的错误不是一个函数。 我已经尝试了许多减速器不可变回报的变体,现在它就像珍娜拉贾尼在这里写下的那样。 可能会尝试在Webpackbin上提供一个工作示例,但这需要一定的时间。 PS:我试过只使用React状态,但是遇到了React setState()这个问题,然后在React + Redux中重写了所有内容,并且问题消失了。然后我不喜欢自举模态,并使用React模态并面对最初的问题。 –