{"id":97117,"date":"2025-02-12T08:21:48","date_gmt":"2025-02-12T04:51:48","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/baby-basic-setup-redux-toolkit\/"},"modified":"2025-02-12T08:21:48","modified_gmt":"2025-02-12T04:51:48","slug":"baby-basic-setup-redux-toolkit","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/baby-basic-setup-redux-toolkit\/","title":{"rendered":"Baby Basic Setup Redux Toolkit."},"content":{"rendered":"
\n

\u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0627\u062e\u062a\u0627\u0631 DIR \u062e\u0648\u062f \u0631\u0627 \u0647\u0631\u0686\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f.<\/p>\n

\n
src\n\u251c app\n\u2502 \u251c layout.js\n\u2502 \u2502 \u251c redux\n\u2502 \u2502 \u2502 \u251c provider.js\n\u2502 \u2502 \u2502 \u2514 store\n\u2502 \u2502 \u2502   \u251c index.js\n\u2502 \u2502 \u2502   \u2514slices\n\u2502 \u2502 \u2502      \u2514 userSlice.js\n... other dirs<\/span>\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
\n
import<\/span> {<\/span> createSlice<\/span> }<\/span> from<\/span> '<\/span>@reduxjs\/toolkit<\/span>'<\/span>\n\nconst<\/span> initialState<\/span> =<\/span> {<\/span> user<\/span>:<\/span> {},<\/span> isLoggedIn<\/span>:<\/span> false<\/span> }<\/span>\n\nconst<\/span> userSlice<\/span> =<\/span> createSlice<\/span>({<\/span>\n  name<\/span>:<\/span> '<\/span>user<\/span>'<\/span>,<\/span>\n  initialState<\/span>,<\/span>\n  reducers<\/span>:<\/span> {<\/span>\n    setUser<\/span>:<\/span> (<\/span>state<\/span>,<\/span> action<\/span>)<\/span> =><\/span> {<\/span>\n      state<\/span>.<\/span>user<\/span> =<\/span> action<\/span>.<\/span>payload<\/span>\n    },<\/span>\n    setIsLoggedIn<\/span>:<\/span> (<\/span>state<\/span>,<\/span> action<\/span>)<\/span> =><\/span> {<\/span>\n      state<\/span>.<\/span>isLoggedIn<\/span> =<\/span> action<\/span>.<\/span>payload<\/span>\n    }<\/span>\n  },<\/span>\n})<\/span>\n\nexport<\/span> const<\/span> {<\/span> setUser<\/span>,<\/span> setIsLoggedIn<\/span> }<\/span> =<\/span> userSlice<\/span>.<\/span>actions<\/span>\nconst<\/span> userReducer<\/span> =<\/span> userSlice<\/span>.<\/span>reducer<\/span>\nexport<\/span> default<\/span> userReducer<\/span>\n<\/code><\/pre>\n
\n
\n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
    \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \n
  • Store\/index.js -> Store.js\n<\/li>\n<\/ul>\n
    \n
    '<\/span>use client<\/span>'<\/span>\nimport<\/span> {<\/span> configureStore<\/span> }<\/span> from<\/span> \"<\/span>@reduxjs\/toolkit<\/span>\"<\/span>\nimport<\/span> userReducer<\/span> from<\/span> \"<\/span>.\/slices\/userSlice<\/span>\"<\/span>\nexport<\/span> const<\/span> store<\/span> =<\/span> configureStore<\/span>({<\/span>\n  reducer<\/span>:<\/span> {<\/span>\n    user<\/span>:<\/span> userReducer<\/span>\n  }<\/span>\n})<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    '<\/span>use client<\/span>'<\/span>\n\nconst<\/span> {<\/span> Provider<\/span> }<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>react-redux<\/span>\"<\/span>)<\/span>\nconst<\/span> {<\/span> store<\/span> }<\/span> =<\/span> require<\/span>(<\/span>\"<\/span>.\/store<\/span>\"<\/span>)<\/span>\n\nconst<\/span> ReduxProvider<\/span> =<\/span> ({<\/span> children<\/span> })<\/span> =><\/span>\n  <<\/span>Provider<\/span> store<\/span>=<\/span>{<\/span>store<\/span>}<\/span>><\/span>\n    {<\/span>children<\/span>}<\/span>\n  <<\/span>\/Provider<\/span>>\n<\/span>\nexport<\/span> default<\/span> ReduxProvider<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n
    \n
    \/\/other imports<\/span>\nimport<\/span> ReduxProvider<\/span> from<\/span> \"<\/span>.\/redux\/provider<\/span>\"<\/span>;<\/span>\n\/\/ ... other code<\/span>\nexport<\/span> default<\/span> function<\/span> RootLayout<\/span>({<\/span> children<\/span> })<\/span> {<\/span>\n  return <\/span>(<\/span>\n    <<\/span>html<\/span> lang<\/span>=<\/span>\"en\"<\/span>><\/span>\n      <<\/span>body<\/span> className<\/span>=<\/span>'...'<\/span>><\/span>\n        <<\/span>ReduxProvider<\/span>><\/span>\n            {<\/span>children<\/span>}<\/span>\n        ReduxProvider<\/span>><\/span>\n      body<\/span>><\/span>\n    html<\/span>><\/span>\n  );<\/span>\n<\/code><\/pre>\n
    \n
    \n    \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n
        \u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    \n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
    \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0633\u0627\u062e\u062a\u0627\u0631 DIR \u062e\u0648\u062f \u0631\u0627 \u0647\u0631\u0686\u0646\u062f \u06a9\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f. src \u251c app \u2502 \u251c layout.js \u2502 \u2502 \u251c redux \u2502 \u2502 \u2502 \u251c provider.js \u2502 \u2502 \u2502 \u2514 store \u2502 \u2502 \u2502 \u251c index.js \u2502 \u2502 \u2502 \u2514slices \u2502 \u2502 \u2502 \u2514 userSlice.js … other dirs \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f …<\/p>\n","protected":false},"author":2,"featured_media":97118,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0nd3pyt7mtn809gbsyjs.png","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-97117","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/97117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=97117"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/97117\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/97118"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=97117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=97117"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=97117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}