Как сказать redux, чтобы установить определенное значение, только если оно равно action.id

Question

Как бы я сказал, чтобы redux фильтровал через state.posts, и если post.id эквивалентен action.id, установите значение лайков для этого конкретного поста.

на данный момент, количество likeCountsна всех сообщениях все числа равны 17. Когда это должно быть сообщение 1 имеет 17 лайков, сообщение 2 имеет 5 лайков и т. д.

console.log(action.data) // logs number of likes for all posts

не отображает массив только отдельные значения, подобные этому

редуктор

const initialState = {
    post: [],
    postError: null,
    posts:[],
    isEditing:false,
    isEditingId:null,
    likes:0,
    postId:null
}

     case GET_LIKES_COUNT:
            console.log(action.data) // logs number of likes for all posts 
                                     // (line 45)
            console.log(state.posts) // logs an array of posts
            console.log(action.id) // logs post id 
            // need to check if post.id is === action.id if so give it the value from action.data
            return({
                ...state,
                likes: action.data 
            })

Answer 1

Лучший способ получить лайки из поста - включить его в свой бэкэнд-вызов API myPosts.

как это

router.get('/myPosts',  async  (req, res) =>{
   await models.Post.findAll({ 
        include:[{
            model:models.Likes
        }],    
        order:[ 
        ['createdAt', 'DESC'],
        ], limit: 6 })
       .then( (posts) =>{
           res.json(posts);

       })
});

таким образом, только этот конкретный пост будет получать количество лайков для этого поста.

и это можно так назвать

PostItem.js

....
<Like like={id} likes={Likes.length} />

Like.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCoffee, faAdjust } from '@fortawesome/free-solid-svg-icons';
import {connect} from 'react-redux';
import {  getLikeCount, postLike} from '../actions/';
class Like extends Component{
    constructor(props){
        super(props);
        this.state = {
            likes: null,
            heart: false
        }
    }

    clickLike = (id) => {
        this.props.postLike(id);
        // toggles between css class
        this.setState({
            heart: !this.state.heart
        })
    }
    render(){
       return(
            <div style={{float:'right', fontSize: '1.5em', color:'tomato'}} >
            <i style={{ marginRight: '140px'}} className={this.state.heart ? 'fa fa-heart':'fa fa-heart-o' }>
                    <span style={{ marginLeft: '6px'}}>
                        <a href="#" onClick={ () => this.clickLike(this.props.like)}>Like</a>       
                    </span>
                    {/* gets the like counts */}
                    {this.props.likes}
                </i>
            </div>       
       )
    }
}
const mapStateToProps = (state) => ({
    isEditingId: state.post.isEditingId,
    likeCount:state.post.likes
})
const mapDispatchToProps = (dispatch) => ({
    postLike: (id) => dispatch( postLike(id))

});
export default connect(mapStateToProps, mapDispatchToProps)(Like);

Answer 2

Мы можем просто использовать оператор if или тернарные операторы в редукторах. Просто имейте в виду фактор неизменности, так как состояние никогда не должно быть видоизменено, иначе это создает проблему в дальнейшем. Для этого вы можете использовать помощники неизменяемости приведения.

const initialState = {
        post: [],
        postError: null,
        posts:[],
        isEditing:false,
        isEditingId:null,
        likes:0,
        postId:null
    }



case GET_LIKES_COUNT:
let newState = [...state].post.map(post => post.id === action.id ? post.likes === action.data : post); // for immutability purpose
            return({
                newState
            })