React 循环数据 点赞的实现

我自己在鼓捣一个小功能的时候遇到一些问题，我并不是一个专业的前端开发人员，所以做起来有些吃力，分享一下个人思路：

我想做一个如图的点赞小功能：

遇到的问题；

1 reducers 是个嵌套的json数据，如上图所示，修改state数据容易，但是修改state中嵌套数据的某一项却很困难。

我想了一撮头发的时间  大概思路：

首先在钩子函数componentDidMount() 中 设置 sessionStorage，存入每一项和总的数组

var storage = window.sessionStorage;

export const getList = () => {
    return (dispatch) => {
        axios.get(global.constants.recommended).then((res)=>{
            const data = res.data.items
            data.map((item)=>(
                storage.setItem(item.id, JSON.stringify(item))
            ))
            storage.setItem('praiseItems', JSON.stringify(data))
            dispatch(changeList(data));
        }).catch (()=>{
            console.log('Error')
        })
    }
};

然后 点赞onclick事件中要将点击的数据和storage 数据进行 diff 对比，修改parse状态然后，组成一个新的列表更新state

const addPraise = (data) =>({
    type: constants.HOME_ADD_PRAISE_DATA,
    data: data
})

export const addPraiseHandel = (id) => {
    return (dispatch) => {
        axios.get(global.constants.PraiseAdd).then((res)=>{
            // const result = res.data;
            const newsItems = []
            let data = JSON.parse(storage.getItem(id));
            let praiseItems = JSON.parse(storage.getItem('praiseItems'))
            allPraise.push(id)
            praiseItems.map((itm)=>{
                if (itm.id === data.id){
                    itm.praise = true
                    newsItems.push(itm)
                }else{
                    if(allPraise.includes(itm.id)){
                        itm.praise = true
                        newsItems.push(itm)
                    }else{
                    newsItems.push(itm)
                    }
                }
            })
            dispatch(addPraise(newsItems));
        }).catch (()=>{
            console.log('Error')
        })
    }
};

reducers

import { fromJS } from 'immutable';
import update from 'immutability-helper';
import * as constants from './constants';
// import { act } from 'react-dom/test-utils';

const defaultState = fromJS({
    WriterList: [],
    praiseData: false,
    praiseStatus: []
});

const reducer = (prevState = defaultState, action) => {
    switch (action.type) {
        case constants.HOME_ADD_PRAISE_DATA:
            // const addNewCollection = update(prevState.get('WriterList').toJS(), {[action.data - 1]:{$merge: {praise: true,}}});
            return prevState.set('WriterList', fromJS(action.data))
        
    default:
            return prevState;
    }

}
export default reducer;