![](/img/trans.png)
[英]Redux Reducer - How to update an object value without mutating the state?
[英]How to Increase Post like without Mutating state in redux?
我是redux的新手,我知道这是一个新手问题,但我找不到任何正确的解决方案。我正在构建一个简单的帖子,当有人单击这是我的代码时,点击次数增加不改变状态的特定帖子,以及包含图片的帖子的大数组对象时执行此操作的最有效方法是什么
App.js
import React from 'react';
import {connect} from 'react-redux';
import uuid from 'uuid'
import * as inputActions from './actions/addinput';
class Main extends React.Component{
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.handlelike = this.handlelike.bind(this);
}
handleSubmit(e){
e.preventDefault();
console.log(e.target.name.value)
this.props.addinput
(
{
id:uuid.v1(),
name:e.target.name.value,
likes:0
}
)
}
handlelike(id){
this.props.likes(id)
}
render(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<input type="text" name="name"/>
<input type="submit"/>
</form>
<div>
{this.props.inputs.map((data) => {
return(
<div key={data.id}>
<p >{data.name} <button onClick={ () => this.handlelike(data.id)}> {data.likes} Like it</button></p>
</div>
)
})}
</div>
</div>
)
}
}
const mapStateToPros = (state) => {
return{
inputs:state.addinput
}
};
const mapDispatchToProps = (dispatch) => {
return {
addinput: input => dispatch(inputActions.postinput(input)),
likes:id => dispatch(inputActions.likes(id))
}
};
export default connect(mapStateToPros,mapDispatchToProps)(Main)
actions.js
import * as actionTypes from './actionTypes';
export const postinput = (input) =>{
console.log(input,"From Action")
return{
type:'POST_INPUT',
payload:input
}
}
export const likes = (id) => {
return{
type:'LIKES',
payload:id
}
}
reducers.js
export default (state = [],action) => {
switch (action.type){
case 'POST_INPUT':
return[
...state,
Object.assign({},action.payload)
];
case 'LIKES':
export default (state = [],action) => {
switch (action.type){
case 'POST_INPUT':
return[
...state,
Object.assign({},action.payload)
];
case 'LIKES':
//start work from here
return state.map((post) => {
console.log(post.id);
if (post.id === action.payload) {
return Object.assign({}, post, { likes: post.likes+1 })
} });
default:
return state
}
}
您知道不应在Redux中更改状态/存储,因此可以返回新状态,如下所示,
case 'LIKES':
return state.map((post) => {
if (post.id === action.payload) {
return Object.assign({}, post, { likes: post.likes+1 }) }
}
return post
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.