Где я могу поместить логику кодирования в приложение React Application

Итак, я сделал простое приложение поиска Json, которое вы можете просмотреть на кодеде. Он ищет название и теги Json и возвращает любые совпадения: http://codepen.io/ghozt12/pen/LVaxLM

Он основан на примере, приведенном на веб-сайте React (https://facebook.github.io/react/docs/thinking-in-react.html).

Однако я не понимаю, куда поместить логику, которая фильтрует результаты поиска. Если React - это просто V в MVC, не должна ли бизнес-логика идти в Модели? Но "Реакт" - это просто взгляд, поэтому, где вы ставите логику?

В частности, для моего приложения я поместил код поиска в этот класс реагирования, и я хотел знать, было ли это подходящее место для его размещения? (см. мой код для детального просмотра).

var Table = React.createClass({
    render: function() {

    // CODE THAT FILTERS SEARCH RESULTS GOES HERE
    // creates rowTitle array

   return ( 
         <div> 
           {rowsTitle} 
         </div>
       );
    }
});

Ответ 1

Как вы сказали, React - это просто V в MVC. Итак, где вы помещаете свою бизнес-логику?

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

Если у вас есть бизнес-логика, не относящаяся к просмотру, и она выполняется на клиенте (или на клиенте и на сервере), всегда полезно отличить это от отдельного модуля JavaScript. React не очень хорошо сочетается с AMD, поэтому вам лучше не использовать RequireJS для модуляции. Вероятно, вы должны использовать Browserify или Webpack. В этом случае все, что вам нужно сделать, это добавить это в верхний или ваш файл компонента: var myBusinessLogic = require('./myBusinessLogic'). Теперь вы можете делегировать обработку этому модулю. Это предпочтительный способ, потому что модули JavaScript легко проверяются с помощью Jest, Jasmine, Karma или Mocha.

Существует также третий сценарий, в котором вы делегируете бизнес-логику серверу. Вы можете напрямую совершать Ajax-вызовы API на сервере, выполнять эту обработку, или вы можете использовать более сложный способ и использовать Flux. Там множество реализаций Flux, таких как Alt, Redux и Fluxxor. Я предпочитаю иметь собственную реализацию Flux, используя диспетчер по умолчанию. Внутри ActionCreators я вызываю метод на clientApi (JS-модуль), который выполняет вызов Ajax, используя Axios на сервере. Этот вызов обрабатывается экспресс-маршрутом, который, наконец, делегирует бизнес-логику serverApi.

EDIT: я просто переехал в Redux:)

Ответ 1

Ответ 2