{"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-02-10T04:19:47","modified_gmt":"2026-02-10T04:19:47","slug":"redux","status":"publish","type":"post","link":"https:\/\/codeinsightacademy.com\/blog\/javascript\/redux\/","title":{"rendered":"Redux"},"content":{"rendered":"\n<pre class=\"wp-block-code\"><code>npm install react-redux @reduxjs\/toolkit\n<\/code><\/pre>\n\n\n\n<p>counterSlice.js<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>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<p>store.jsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>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<p>main.jsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>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  &lt;StrictMode&gt;\n    &lt;Provider store={store}&gt; {\/* Wrap your App inside Provider *\/}\n    &lt;App \/&gt;\n    &lt;\/Provider&gt;\n  &lt;\/StrictMode&gt;,\n)\n<\/code><\/pre>\n\n\n\n<p>App.jsx<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>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    &lt;>\n      &lt;button onClick={() => dispatch(increment())}>+&lt;\/button>\n      &lt;button onClick={() => dispatch(decrement())}>-&lt;\/button>\n      &lt;h1>{count}&lt;\/h1>\n    &lt;\/>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>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":8,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2466\/revisions"}],"predecessor-version":[{"id":2965,"href":"https:\/\/codeinsightacademy.com\/blog\/wp-json\/wp\/v2\/posts\/2466\/revisions\/2965"}],"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}]}}