Javascript 是否可以创建具有动态状态的减速器？

反应应用程序16+，重复使用

我在

bookRoom.js

中有

bookRoom

组件，用于渲染带有数字的单个矩形（表示房间），如下图所示

示例渲染

此组件在父级

bookRooms.js中的
map
帮助下呈现，并且
room
作为输入属性传递。我想在单击矩形时更改房间的状态，我只想重新渲染我单击的特定组件

bookRoom.js

import React, {useState} from 'react';
import * as classes from './BookRoom.module.scss';
import './BookRoom.module.scss';

const bookRoom = function(room, setRooms, originalRoom) {
    if(!room.class) {
        room.class = classes.selected;
    }else if(room.class === classes.selected) {
        room.class = '';
    }
    originalRoom.class = room.class;
    setRooms({...room});
};

function BookRoom(props) {
    const [book, setBooks] = useState(props.book);
    const originalRoom = props.book;
    return (
        <div
             title={book.reservedBy ? `Booked by ${book.reservedBy}` : ''}
             className={`${classes.room} ${book.class || ''}`}
             onClick={bookRoom.bind(null, book, setBooks, originalRoom)}>
            <p>{book.bookId}</p>
        </div>
    );
}

export default BookRoom;

查看传递给combinereducer的对象，我想知道是否可以在运行时添加/删除更多状态，例如，最初我有

export default combineReducers({
    rooms: roomsReducer
});

但在拿到房间后，我希望看到这样的SMT

export default combineReducers({
    rooms: roomsReducer
    room1: getRoomReducer(1),
    room2: getRoomReducer(2),
    room3: getRoomReducer(3)
});

因此，它将是有效的写

function mapStateToProps(state, props) {
    return {
        room: state['room' + props.roomId].rooms,
    }
}

function mapDispatchToProps(dispatch, props) {
    return {
        book: () => dispatch({type: 'ROOM_CLICKED_'+props.bookId})
    }
}

那么，是否可以在
房间
状态更改时修改根减速机？要为每个房间创建单独的状态

注：理想情况下，在没有重复的情况下删除代码中的键，但目前我不知道如何做到这一点
 最好是只有一个房间的状态

您的减速机将只是一个
房间减速机
，如果动态加载，它可能看起来像这样：

export default function roomsReducer(state, action) {
    switch (action.type) {
        case types.ROOMS.SET:
            return setRooms(action.rooms);
        case types.ROOMS.BOOK:
            return bookRoom(state, action.data);
        default:
            return state || initialState.loadInitials().rooms;
    }
}

然后在
ROOMS.BOOK上更新您的房间

function bookRoom(state, data) {
    return [
        ...state.map(room=> {
            if (room.id !== data.id) {
                return room;
            } else {
                const newRoom = Object.assign({}, room);
                newRoom.booking = changeDataOnRoomBook() //fill this in
                return newRoom;
            }
        })
    ];
}

在组件中，您只需在
mapStateToProps

function mapStateToProps(state, ownProps) {
    const roomId = ownProps.id; //get room id from props
    const room = state.rooms
        ? state.rooms.find(room => {
                return room.id === roomId;
          })
        : null;

    return {
        room
    };
}

为什么需要两个单独的实体？您可以将所有信息存储在“rooms”状态，并在redux reducer中按键（id）进行标识<代码>房间：[{id:'room1'，预订：[]}，…]
然后只需要一个检查的减速器id@Tikkes我想如果我用这个
state={…state，rooms:[…state.rooms]}
更新state，那么我的所有单人房间组件都将重新提交。另外，我希望能够从阵列中重用单房间组件。如果您具有相同的密钥，则不能这样做，这是您应该用于react组件上的密钥的。所以你的
室友将是你房间的钥匙component@Tikkes我在谷歌上搜索过，但没有找到键如何帮助更新元素，我的意思不是在添加或删除元素时，而是在更新元素本身时。通常我在这里看到很多状态：数组的状态-长度、elementOrder等，它们可以由键管理，每个元素的单独状态不是由键管理的，如果我更新这个单独的状态，我必须更新所有元素，但我以前是用私有状态（没有redux）来管理它的。我不认为您所要求的是可能的，因为您正在渲染一个数组，并期望它在单个元素更改时重新渲染。据我所知，React无法知道是否只是其中一个发生了变化。据我所知，无法更新rootReducer
function bookRoom(state, data) {
    return [
        ...state.map(room=> {
            if (room.id !== data.id) {
                return room;
            } else {
                const newRoom = Object.assign({}, room);
                newRoom.booking = changeDataOnRoomBook() //fill this in
                return newRoom;
            }
        })
    ];
}

function mapStateToProps(state, ownProps) {
    const roomId = ownProps.id; //get room id from props
    const room = state.rooms
        ? state.rooms.find(room => {
                return room.id === roomId;
          })
        : null;

    return {
        room
    };
}