Змяненне структуры стэйту ў Redux

Першы этап, які мы будзем рэалізоўваць для ўзаемадзеяння нашага Redux прыкладання з якім-небудзь вонкавым серверам - гэта атрыманне дадзеных, якія на ім захоўваюцца пры запусце прыкладання. Але перш давайце ўнясем у наша прыкладанне некаторыя змены.

Адчынем наша прыкладанне з прадуктамі, а ў ім файл productsSlice.js. Звярніце ўвагу на вызначэнне initialState. Першапачаткова наш слайс з прадуктамі productsSlice - гэта масіў, у якім маюцца аб'екты (у нашым выпадку іх два) з дадзенымі прадуктаў. Па-першае, так як цяпер мы будзем загружаць іх з сервера, то нам трэба ўбраць іх з initialState. Па-другое, мы будзем пасылаць на сервер API запыты і нам будзе важна ведаць аб іх статусе. Улічваючы гэтыя дзве рэчы, давайце пераробім initialState. Хай цяпер гэта будзе проста аб'ект з палямі products (першапачаткова тут не будзе ніякіх дадзеных, а проста пусты масіў), status і error. Цяпер наш код для initialState стане крыху карацей:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Пакуль мы выставілі статус 'idle' (бяздзеянне), бо першапачаткова мы не адпраўляем ніякіх запытаў, а наогул ён будзе мяняцца і можа прымаць значэнні 'загрузка', 'выкананы', 'памылка загрузкі'. Памятайце, што для абазначэння статусу вы можаце выбраць тыя імёны, якія будуць зручныя вам.

Спускаемся ніжэй па кодзе. Наступна за змяненнем initialState, нам варта памяняць і код, у якім мы працуем з гэтым стэйтам у функцыях-рэдьюсерах. Паглядзім на код для productAdded:

state.push(action.payload)

Цяпер новыя прадукты мы будзем складваць не проста ў state для прадуктаў, а ў яго ўласцівасць state.products. Таму, заменім вышэйпаказаны радок на:

state.products.push(action.payload)

Адпаведна, праробім тыя ж змены для рэдьюсера reactionClicked. Замест:

const currentProduct = state.find((product) => product.id === productId)

Цяпер будзе:

const currentProduct = state.products.find((product) => product.id === productId)

Замяніце самі state на state.products і ў кодзе рэдьюсера productUpdated.

Адчынiце ваша прыкладанне са студэнтамі. Адчынiце ў ім файл studentsSlice.js. Хай цяпер ваш initialState мае тры ўласцівасці: students, status, error - перарабіце яго, як паказана ў уроку.

Унясіце адпаведныя змены і ніжэй па кодзе. Заменіце state на state.students у кодзе для вашых трох функцый-рэдьюсераў.