Kufanya Kazi na Data katika Redux

Katika sehemu iliyopita tulitekeleza mpango wa msingi wa kufanya kazi na Redux na sasa unajua kanuni za msingi za kufanya kazi kwa programu ya Redux. Katika masomo yafuatayo tutaanza kuongeza utendaji wa programu yetu ya bidhaa na kufanya kazi na data.

Kwa kuwa programu itakua na viungo vipya na njia mpya, hebu tufanye jambo moja na uelekezaji. Fungua programu na bidhaa, kisha faili root.jsx. Weka ndani yake kiungo Outlet, wakati huo huo futa mistari yenye kuweka ProductsList na NewProductForm:

import { Outlet } from 'react-router-dom'

Sasa kiungo Root kitatokea kwetu kwenye njia ya mzizi '/', na viungo vingine vyote kwenye ndogo katika Outlet. Kwa hili tusahihishe kidogo muundo wa divi #main-page kwa kiungo Root:

<div id="main-page">
	<h2>Programu Yangu ya Bidhaa</h2>
	<hr></hr>
	<NewProductForm />
	<ProductsList />
</div>

Hapa tutaweka Outlet badala ya viungo NewProductForm na ProductsList:

<div id="main-page">
	<h2>Programu Yangu ya Bidhaa</h2>
	<hr></hr>
	<Outlet />
</div>

Fomu ya kuongeza bidhaa sasa tutakuwa tunatoa kwenye ProductsList. Hebu tufungue faili lenye kiungo hiki na tuongeze kuweka fomu:

import { NewProductForm } from './NewProductForm'

Na sasa tuongeze kiungo chenye fomu kabla ya orodha ya bidhaa. Sasa muundo wetu utaonekana kama hii:

return (
	<div>
		<NewProductForm />
		<div>
			<h2>Bidhaa</h2>
			{dispProducts}
		</div>
	</div>
)

Tuandike mtindo wa darasa products-list kwenye index.css:

.products-list {
	display: flex;
	flex-direction: column;
}

Inatubakia tu kufanya mabadiliko kwenye kiungo kikuu App. Wacha tufungue App.jsx na tuweke ndani yake kiungo ProductsList:

import { ProductsList } from './parts/products/ProductsList'

Kisha kwa njia yetu ya kwanza pekee, ambayo ni ya mzizi, tuongeze sifa children:

const router = createBrowserRouter([
	{ path: '/', element: <Root />, children: [] },
])

Na tuandike kama thamani ya sifa hii njia ya kwanza ya mtoto. Kama njia tuinstall kwake 'products'. Sasa kwenye anwani hii kutakuwa na onyesho la orodha yetu na bidhaa ProductsList:

children: [
	{
		path: '/products',
		element: <ProductsList />,
	},
],

Wacha tuwasha programu yetu na tuhakikishe kuwa hatujuvunja kitu. Kwenye mzizi '/' tunaona kichwa pekee. Na fomu na orodha ya bidhaa zimefichika kwenye anwani '/products'.

Fungua programu yako ya wanafunzi. Kwenye faili root.jsx badilisha viungo StudentsList na NewStudentForm kwa Outlet.

Wacha sasa fomu ya kuongeza mwanafunzi ionekane kwako kwenye StudentsList.

Fanya mabadiliko kwenye kiungo chako kikuu App. Ongeza kwenye njia ya mzizi mtoto, uenye njia '/students', ambapo itaonyesha StudentsList yako. Washa programu na uhakikishe kuwa yote inafanya kazi.