如何在不改变 redux 状态的情况下增加 Post？

Question

我是 redux.I 的新手，知道这是一个新手问题，但我找不到任何正确的问题 solution.I 正在构建简单的 post 当有人点击时点赞数会增加这是我的代码我的问题是如何在不改变状态的情况下更改或增加特定 post 的点赞数，以及当 post 的大数组对象包含图片

时最有效的方法是什么

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
    }

}

Answer 1

你知道你不应该改变 redux 中的 state/store，你可以 return 新状态，如下所示，

case 'LIKES': 
 return state.map((post) => { 
   if (post.id === action.payload) { 
      return Object.assign({}, post, { likes: post.likes+1 }) } 
   }
   return post
)

如何在不改变 redux 状态的情况下增加 Post？

How to Increase Post like without Mutating state in redux?

javascript

reactjs

redux

react-redux