Redux как хранилище моделей - PullRequest
Новая
       7

Redux как хранилище моделей

0 голосов
/ 07 ноября 2018

Я думаю об использовании redux в качестве жесткого репозитория для наших бэкэнд-моделей.

, например 

endpoints:
/cars
/cars/:id

actions:
 listCars
 createCar
 getCar
 deleteCar
 updateCar

однако я не уверен, как правильно реализовать отношения. Допустим, например, что вызов api / car / 1 дает мне следующее, и я поддерживаю ту же структуру для шин, что и в примере с автомобилем, приведенном выше. 

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

в этом случае мне бы хотелось загрузить идентификаторы шин и отобразить их внутри автомобильного редуктора. В настоящее время у меня есть метод-обертка, который отображает кросс-редукторы данных, но это не самое красивое решение. Я понимаю, что могу также отображать состояние в компонентах контейнера, но, учитывая наличие нескольких контейнеров, я хотел бы предотвратить репликацию кода и работать из единого источника правды (избыточности)

Мне было интересно, есть ли общий шаблон, которому я мог бы следовать для этой реализации, и если это вообще хорошая идея

1 Ответ

0 голосов
/ 07 ноября 2018

Если ваш штат: 

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 } }) => // ...
);
...