{"id":2466,"date":"2023-02-20T12:48:17","date_gmt":"2023-02-20T12:48:17","guid":{"rendered":"https:\/\/codeinsightacademy.com\/blog\/?p=2466"},"modified":"2026-06-08T16:41:41","modified_gmt":"2026-06-08T16:41:41","slug":"redux","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/javascript\/redux\/","title":{"rendered":"Redux"},"content":{"rendered":"\n
\"\"<\/a><\/figure>\n\n\n\n
npm install react-redux @reduxjs\/toolkit\n<\/code><\/pre>\n\n\n\n
counterSlice.js<\/p>\n\n\n\n
import { createSlice } from \"@reduxjs\/toolkit\";\n\nconst initialState = {\n  count: 0,\n};\n\nconst counterSlice = createSlice({\n  name: \"counter\",\n  initialState,\n  reducers: {\n    increment: (state) => {\n      state.count += 1;   \/\/ immer allows mutation\n    },\n    decrement: (state) => {\n      state.count -= 1;\n    },\n  },\n});\n\nexport const { increment, decrement } = counterSlice.actions;\nexport default counterSlice.reducer;\n<\/code><\/pre>\n\n\n\n
store.jsx<\/p>\n\n\n\n
import { configureStore } from \"@reduxjs\/toolkit\";\nimport counterReducer from \".\/counterSlice\";\n\nconst store = configureStore({\n  reducer: {\n    counter: counterReducer,\n  },\n});\n\nexport default store;\n\n<\/code><\/pre>\n\n\n\n
main.jsx<\/p>\n\n\n\n
import { StrictMode } from 'react'\nimport { createRoot } from 'react-dom\/client'\nimport '.\/index.css'\nimport App from '.\/App.jsx'\nimport { Provider } from 'react-redux'\nimport store from '.\/store.js'\n\ncreateRoot(document.getElementById('root')).render(\n  <StrictMode>\n    <Provider store={store}> {\/* Wrap your App inside Provider *\/}\n    <App \/>\n    <\/Provider>\n  <\/StrictMode>,\n)\n<\/code><\/pre>\n\n\n\n
App.jsx<\/p>\n\n\n\n
import { useSelector, useDispatch } from \"react-redux\";\nimport { increment, decrement } from \".\/counterSlice\";\n\nfunction App() {\n  const count = useSelector((state) => state.counter.count);\n  const dispatch = useDispatch();\n\n  return (\n    <>\n      <button onClick={() => dispatch(increment())}>+<\/button>\n      <button onClick={() => dispatch(decrement())}>-<\/button>\n      <h1>{count}<\/h1>\n    <\/>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
counterSlice.js store.jsx main.jsx App.jsx<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2466"}],"collection":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/comments?post=2466"}],"version-history":[{"count":10,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2466\/revisions"}],"predecessor-version":[{"id":2981,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2466\/revisions\/2981"}],"wp:attachment":[{"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/media?parent=2466"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/categories?post=2466"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/tags?post=2466"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}