Question

我正在考虑将redux用作后端模型的硬存储库。

例如

endpoints:
/cars
/cars/:id

actions:
 listCars
 createCar
 getCar
 deleteCar
 updateCar

但是我不确定如何正确实现关系。可以说，例如调用api / car / 1给了我以下内容，并且我保持与上面给出的汽车示例中相同的轮胎结构。

{
 id:123,
 tires:[41,54,12,10]
}

在这种情况下，我很想加载轮胎ID并将其映射到汽车减速器中。目前，我有一个包装器方法，可映射数据跨约简器，但这不是最漂亮的解决方案。我意识到我也可以映射容器组件中的状态，但是考虑到有多个容器，我想防止代码复制并从单一的真实来源（redux）进行工作

我想知道这种实现是否可以遵循一个通用模式，这是否完全是一个好主意

Answer 1

如果您的状态是：

cars: {
    123: {
        id: 123,
        tires: [41,54,12,10]
    }   
},
tires: {
    41: {
        id: 41,
        brand: //...
    },
    54: {
        id: 54,
        brand: //...
    },

    // ...
}

选择器将是：

const getTireIds = (state, { carId }) => state.cars[carId].tires;
const getTire = (state, { id }) => state.tires[id];

组件看起来像：

const Car = ({ id }) => <Tires carId={id} />;

const Tires = connect(
    // map state to props:
    (state, { carId }) => ({
        tireIds: getTireIds(state, { carId })
    })
)(
    // component:
    ({ tireIds }) => tireIds.map(tireId => <Tire id={tireId}) />)
);

const Tire = connect(
    // map state to props:
    (state, { id }) => ({
        tire: getTire(state, { id })
    })
)(
    // component:
    ({ tire: { id, brand } }) => // ...
);

将Redux用作模型存储库

1 个答案: