如何在Redux中像不增加狀態那樣增加發布？

Question

我是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
    }

}

Answer 1

您知道不應在Redux中更改狀態/存儲，因此可以返回新狀態，如下所示，

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