¿Dónde guardar la lógica empresarial de la aplicación?
"Eso es lo que realmente está ahí para vapor - directamente en los componentes". - dirán algunos. Y en algunas situaciones, esta es la solución correcta y conveniente.
Pero, ¿y si todavía queremos algo más? Por ejemplo, escalabilidad, múltiples interfaces de usuario, cambios de diseño sencillos. Entonces es lógico dividir la aplicación en dos capas. Capa de lógica empresarial y capa de presentación.
Como está escrito en reactjs.org, React es una biblioteca para construir UI.
Y para el modelo y la lógica empresarial, se han escrito varias otras grandes bibliotecas.
Dio la casualidad de que los proyectos en los que trabajé usaban redux. Por lo tanto, más adelante hablaremos sobre cómo construir la lógica de negocios en una gran aplicación reaccionar / redux, y luego no cerrar los ojos con la mano al ver esa gran cantidad de reductores, acciones, etc.
Capas
Para no confundirme con mi código, estoy acostumbrado a dividir todo en diferentes capas. También hace esto cuando almacena estilos en un archivo, un contenedor en otro, un componente en un tercero, constantes en un cuarto, traducciones en un quinto, componentes sin estado en un sexto y también reductores, acciones, selectores,
¿Qué? ¿No los almacena en archivos diferentes? No, bueno, incluso si lo llamaras el enfoque del pato y metiste todo en un archivo, sigues queriendo decir que consta de diferentes capas.
. 125- X, X.
. , . , , .
.
, - .
?
- , , . - .
, - FilterComponent.
(BottomPanel) UI. : FilterComponent BottomPanel , . . . .
, . - , .
- .
Redux
HOC . . . , .
-
Redux
, - .
- , - , .
.
, . .
.
- .
Thunk, Saga
.. redux, . - . . , - middleware. // .
Thunk Saga Thunk. Saga - . Thunk Saga . , :
UI.
( ) thunk Saga.
thunk Saga 1.
- . - . :
UI
redux .
.
, . . thunk .
thunk, , , . . thunk- dispatch({type: ‘START’}) dispatch({type: ‘END’}) .
.
, :
1. - /
2.
Redux Thunk
. Redux, - Thunk.
, thunk actions - action.
Thunk Saga?
Thunk Saga.
. , .
.
.
, . . - . thunk.
, , dispatch(action).
, .
, , - , -, , npm .
React. - - . - . , . .
- . react-, UI, : UI react- react-.
, :
ghost - createElement
ghosts - Fragment
, :
export const ghost = createElement;
export const ghosts = createElement.bind(null, Fragment, null);
“”. .
- , UI, .
:
const AppActor = ({ param1, param2, showModalX }) => ghosts(
ghost(MenuActor, { param1 }),
ghost(PagesActor, { param2 }),
showModalX && ghost(ModalXActor)
)
jsx .
const HomePageActor = () => {
const dispatch = useDispatch()
useEffect(() => {
const interval = setInterval(() => {
dispatch({type: 'COUNTER_PLUS'})
}, 1000)
return () => clearInterval(interval)
})
// you should explicitly point that this ghost hasn't child ghosts
return null
}
, npm react-ghost . , UI. , thunk useEffect.
, .